border radius not apply inside container widget

Question

Border radius not apply inside child Container. Tried with SizedBox & Stack widget. I need border view inside container.

Scaffold(
 appBar: AppBar(
 title: new Text("ListView"),
 ),
 body: Center(
 child: Padding(
 padding: EdgeInsets.all(15.0),
 child: Container(
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(15.0),
 border: Border.all(
 color: Colors.green,
 width: 2.0
 )
 ),
 child: Container(
 color: Colors.red,
 )
 ),
 )
 )
)

Answer 1

Other answers already state that you need to use ClipRRect to apply the border radius to the child widget of Container.

However, Container widget now has its clipBehaviour property to clip its child:

Container(
 // Add the line below
 clipBehavior: Clip.hardEdge,
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(15.0),
 border: Border.all(color: Colors.green, width: 2.0)),
 child: Container(
 color: Colors.red,
 ),
);

It's a good pratice to use this property rather than nest the widgets for a clean code.

• Maruf Hassan: This is the best answer since using ClipRRect is more processor intensive.
• Johan Witters: Perfect answer. Thanks very much. You can't add a boxShadow to the decorator of a ClipRRect. It doesn't work. However, you can add that boxShadow to a Container with clipBehavior Clip.hardEdge. This is another reason why this should be the accepted answer is that.

Answer 2

Try this, Use ClipRRect and nest inside another Container and now you can add non-uniform borders

Container(
 decoration: BoxDecoration(
 color: Colors.white,
 borderRadius: BorderRadius.circular(10),
 boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],
 ),
 child: ClipRRect(
 borderRadius: BorderRadius.circular(10),
 child: Container(
 padding: EdgeInsets.all(20),
 decoration: BoxDecoration(
 border: Border(
 left: BorderSide(color: Colors.indigo, width: 5),
 ),
 ),
 child: Column(
 mainAxisSize: MainAxisSize.min,
 children: <Widget>[
 Icon(Icons.home),
 Text("Home"),
 ],
 ),
 ),
 ),
 )

Answer 3

decoration is painted behind the child. If you want the decoration to be applied in front of the container's child, use foregroundDecoration

Scaffold(
 appBar: AppBar(
 title: new Text("ListView"),
 ),
 body: Center(
 child: Padding(
 padding: EdgeInsets.all(15.0),
 child: Container(
 foregroundDecoration: BoxDecoration(
 borderRadius: BorderRadius.circular(15.0),
 border: Border.all(
 color: Colors.green,
 width: 2.0
 )
 ),
 child: Container(
 color: Colors.red,
 )
 ),
 )
 )
)

above code paints border in front of the child container. Please note that, even with foregroundDecoration child container would still have sharp corners.

If you want the child container to have rounded corners, either you need apply borderRadius to the child container or use ClipRRect with same border radius as the parent container

• shanks_9790: OMG it works so fine.

Answer 4

Instead of

Container

widget use

ClipRRect

Before (not working):

 Center(
 child: Container(
 decoration: BoxDecoration(
 borderRadius: _getAllRoundedBorderRadius(),
 ),
 child: Hero(
 tag: "CossackHero",
 child: TweenImage(
 last: AssetImage("images/background/cossack_0.jpg"),
 first: AssetImage("images/background/c_cossack_0.jpg"),
 duration: 2,
 height: height,
 ),
 ),
 ),
 ),

After:

Center(
 child: ClipRRect(
 borderRadius: getAllRoundedBorderRadius(),
 child: Hero(
 tag: "CossackHero",
 child: TweenImage(
 last: AssetImage("images/background/cossack_0.jpg"),
 first: AssetImage("images/background/c_cossack_0.jpg"),
 duration: 2,
 height: height,
 ),
 ),
 ),
 ),

Answer 5

const innerRadius = 15.0;
const borderWidth = 2.0;
const borderColor = Colors.green;
const color = Colors.red;
const size = 100.0;
Container(
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(innerRadius + borderWidth),
 color: borderColor,
 ),
 padding: EdgeInsets.all(borderWidth),
 child: ClipRRect(
 borderRadius: BorderRadius.circular(innerRadius),
 child: Container(
 color: color,
 width: size,
 height: size,
 ),
 ),
);

This is how it looks:

enter image description here

And how it works: https://codepen.io/mshibanami/pen/LYyQJXa

---

By the way, some answers suggest you using one Container that has decoration including border and color like this:

Container(
 width: size,
 height: size,
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(innerRadius),
 border: Border.all(
 color: borderColor,
 width: borderWidth,
 ),
 color: color,
 ),
)

It's OK but not ideal because the inner color appears slightly outside the border. So when the border is close to the background color, it may stand out like this:

enter image description here

Answer 6

Screenshot:

enter image description here

---

With ClipRRect (Using 2 Container)

ClipRRect(
 borderRadius: BorderRadius.circular(16),
 child: Container(
 width: 100,
 height: 100,
 color: Colors.black,
 child: Container(
 margin: EdgeInsets.all(8),
 color: Colors.blue,
 ),
 ),
)

---

Without ClipRRect (Using 1 Container)

Container(
 width: 100,
 height: 100,
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(16),
 border: Border.all(
 color: Colors.black,
 width: 4,
 ),
 color: Colors.blue,
 ),
)

• g4s0l1n: ClipRRect with borderRadius is the best solution that I found, really thanks :)

Answer 7

Replace your code with this

Scaffold(
appBar: AppBar(
title: new Text("ListView"),
),
body: Center(
 child: Padding(
 padding: EdgeInsets.all(15.0),
 child: Container(
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(15.0),
 border: Border.all(
 color: Colors.green,
 width: 2.0
 )
 ),
 child: Container(
 decoration: new BoxDecoration(borderRadius: 
 BorderRadius.circular(15.0),
 color: Colors.red,),
 )
 ),
 )
)
)

• NIRAV PATEL: Already defined border to parent container. Is it necessary to add again in child container. ? @Zulfiqar
• Iule: BorderRadius property defines the shape of the widget, not the line around it. If you use borderRadius on the parent widget, the child doesn't inherit that property, so it paints in the default rectangular shape. If you want it to have rounded borders you have to specify it too.

Answer 8

try

decoration: BoxDecoration(
 gradient: new LinearGradient(
 begin: Alignment.topCenter,
 end: Alignment.bottomCenter,
 stops: [0.02, 0.02],
 colors: [Colors.red, Colors.white],
 ),
 borderRadius: BorderRadius.all(Radius.circular(10)),
 color: Colors.white,
 boxShadow: [
 BoxShadow(color: Colors.grey, blurRadius: 5.0),
 ],
 ),

• Iule: Why use gradient and how does this answer the question?

Answer 9

you have to just add these line of code clipBehavior:Clip.hardEdge,

Scaffold(
 appBar: AppBar(
 title: new Text("ListView"),
 ),
 body: Center(
 child: Padding(
 padding: EdgeInsets.all(15.0),
 child: Container(
 

clipBehavior:Clip.hardEdge,

 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(15.0),
 border: Border.all(
 color: Colors.green,
 width: 2.0
 )
 ),
 child: Container(
 color: Colors.red,
 )
 ),
 )
 )
)

Answer 10

I guess your container might just not be visible because it has no child/height/width.

Try adding some Text as a child or if you want it to expand, you can force with SizedBox.expand.

See this answer for example on borders.

• NIRAV PATEL: Border is visible. Issue with border radius for child widget.Here is image link putul.io/JWDFnTYTl. In child widget not applied parent widget border which one i gave. @MarcinSzałek