How to Add Borders to Container Widget in Flutter

In this example, we are going to show you the easiest way to add borders to the Container widget on Flutter. We will show you to add fully on all four sides and on the specific side too. See the example below.

Container(
    height:50,
    width:300,
    decoration: BoxDecoration(
      border: Border.all(
          color: Colors.black, //color of border
          width: 2, //width of border
        ),
      borderRadius: BorderRadius.circular(5)
    ),  
)

See this also: How to Make Dotted/Dash Border on Container in Flutter App

Container(
    margin: EdgeInsets.only(top:20),
    height:50,
    width:300,
    decoration: BoxDecoration(
      border: Border(
          top: BorderSide(
              color: Colors.redAccent, width: 2
            ),
          bottom: BorderSide(
              color: Colors.purpleAccent, width: 5
            ),

        left: BorderSide(
              color: Colors.black, width: 10
            ),
        right: BorderSide(
              color: Colors.green, width: 4
            )
      )
    ),  
)

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( home: MyApp(),)
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Add Border to Container"),
              backgroundColor: Colors.deepPurpleAccent
          ),
          body: Container( 
              alignment: Alignment.topCenter,
              margin: EdgeInsets.only(top:20),
              child: Column( 
                children:[
                  Container(
                      height:50,
                      width:300,
                      decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.black, //color of border
                            width: 2, //width of border
                          ),
                        borderRadius: BorderRadius.circular(5)
                      ),  
                  ),


                  Container(
                     margin: EdgeInsets.only(top:20),
                      height:50,
                      width:300,
                      decoration: BoxDecoration(
                        border: Border(
                           top: BorderSide(
                                color: Colors.redAccent, width: 2
                              ),
                           bottom: BorderSide(
                                color: Colors.purpleAccent, width: 5
                              ),

                          left: BorderSide(
                                color: Colors.black, width: 10
                              ),
                          right: BorderSide(
                                color: Colors.green, width: 4
                              )
                        )
                      ),  
                  ),


                ]
              ) 
          )
      );
  }
}