Flutter: Container border examples

This article walks you through 3 examples of setting borders for a Container in Flutter.

Example 1: Set a border for all sides

This example creates a square yellow box enclosed by a red border.

Preview:

The code:

Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.yellow,
                // Red border with the width is equal to 5
                border: Border.all(
                    width: 5, 
                    color: Colors.red
                )
          ),
     ),
)

Example 2: Set a different border for each side

In this example, we specify a different border for each side of a box (top, right, bottom, and left) by using the BorderSide class.

Preview:

The code:

Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.blue[100],
                // Set a border for each side of the box
                border: const Border(
                  top: BorderSide(width: 15, color: Colors.yellow),
                  right: BorderSide(width: 20, color: Colors.purple),
                  bottom: BorderSide(width: 25, color: Colors.green),
                  left: BorderSide(width: 18, color: Colors.black)
                )
          ),
))

Example 3: A border with rounded corners

Preview:

The code:

Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
                color: Colors.orange,
                border: Border.all(
                  width: 5,
                  color: Colors.purple,
                ),
                // Make rounded corners
                borderRadius: BorderRadius.circular(30)
          ),
 ))

Conclusion

In this article, you explored several examples of how to set borders for a Container in Flutter. If you’d like to learn more new and interesting things about that amazing technology, take a look at the following articles:

• Flutter Gradient Text Examples
• Flutter: Adding a Border to an Elevated Button
• Flutter: Adding a Gradient Border to a Container (2 Examples)
• Flutter: AnimatedContainer example
• Flutter: Making Beautiful Chat Bubbles (2 Approaches)
• Flutter: Showing a badge on the Top Right of a widget

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.