11 May 2026 Leave a comment Tech-Help
If you want a Container with a border and rounded corners in Flutter, the key is to use borderRadius inside BoxDecoration. A common mistake is to try clipping the widget after adding the border, which can remove or hide the border instead of rounding it cleanly.
The simplest solution
For most cases, you can keep your Container and add both border and borderRadius in the decoration:
Container(
width: screenWidth / 7,
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
),
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
children: [
Text(
'6',
style: TextStyle(
color: Colors.red,
fontSize: 25,
),
),
Text(
'sep',
style: TextStyle(
color: Colors.red,
),
)
],
),
),
);This is usually the best approach when you want a standard rounded rectangle.
Why ClipRRect may not be the right choice
ClipRRect is useful when you want to clip the child content to rounded corners, but it is not the best tool if your goal is to preserve a visible border. In many layouts, clipping can make the border look cut off or disappear at the edges.
In other words:
- Use
BoxDecorationwhen you want rounded borders on the container itself. - Use
ClipRRectwhen you want to clip the child content, such as an image or background, to a rounded shape.
When to use a circle instead
If your design needs a fully circular element, use shape: BoxShape.circle:
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
),
child: const Icon(
Icons.add,
color: Colors.white,
),
);This works well for icon buttons, badges, and circular counters.
Rounding only specific corners
Sometimes you do not want all corners rounded equally. Flutter supports that too:
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Text('Text'),
);You can also round only one side or create asymmetric shapes using BorderRadius.horizontal or BorderRadius.only.
Choosing the right approach
- Rounded border around a box: use
BoxDecorationwithborderRadius. - Perfect circle: use
shape: BoxShape.circle. - Rounded child content only: use
ClipRRect. - Need Ink effects with rounded corners: consider wrapping the widget in
Materialwith a rounded shape.
Practical tip
If your border still looks off, make sure the same radius is applied consistently to the decoration and any parent or overlay widget that affects the shape. Mismatched radii are a common reason rounded corners look uneven.
Related Flutter guides
- How to change the border color of a TextField in Flutter
- Creating rounded corners for images in Flutter
- Creating a circle icon button in Flutter
Wrapping up
For a bordered Container with rounded corners, the most reliable solution is to define borderRadius in BoxDecoration. That keeps the border visible, gives you precise control over the shape, and works well for both simple cards and more custom UI elements.
If you are building Flutter UI at scale, the same principle applies to testing: consistent widgets are easier to verify and maintain. Repeato can help here with fast no-code test recording for Flutter apps, plus computer-vision-based test execution that is useful when UI shapes and visual states matter.
