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,
            )
        ),
      )
  )
)

score 62 · Answer 1 · answered Aug 18 '19 at 12:38

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"),
                          ],
                        ),
                      ),
                    ),
                  )

Stewie Griffin · Accepted Answer · 2021-07-11T13:34:28.660

60

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.

edited Jul 11 '21 at 13:34

answered Jul 11 '21 at 13:29

Stewie Griffin

4,690
23
42

4

This should be accepted answer. – iStar Oct 22 '21 at 07:22
3

This is the best answer since using ClipRRect is more processor intensive. – Maruf Hassan Jan 10 '22 at 12:24
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. – Johan Witters May 06 '22 at 10:41
you'r great man! – Hamid Hussainy Aug 10 '22 at 07:07

Hari Prasad · Answer 3 · 2022-05-05T12:42:58.513

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

score 19 · Answer 4 · answered Jun 11 '19 at 18:44

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,
            ),
          ),
        ),
      ),

score 7 · Answer 5 · answered Jan 14 '21 at 17:18

Screenshot:

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,
  ),
)

ClipRRect with borderRadius is the best solution that I found, really thanks :) — g4s0l1n, Apr 09 '21 at 19:56

Manabu Nakazawa · Answer 6 · 2021-08-29T08:15:10.047

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:

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:

score 5 · Answer 7 · answered Sep 03 '18 at 15:37

5

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,),
                    )
    ),
  )
)
)

answered Sep 03 '18 at 15:37

Sher Ali

5,513
2
27
29

Already defined border to parent container. Is it necessary to add again in child container. ? @Zulfiqar – NIRAV PATEL Sep 04 '18 at 16:12
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. – Iule May 19 '21 at 11:07

score 3 · Answer 8 · answered Jun 06 '19 at 14:58

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),
                              ],
                            ),

Why use gradient and how does this answer the question? – Iule Aug 23 '21 at 10:28 — Iule, Aug 23 '21 at 10:28

jaimin rana · Answer 9 · 2022-01-10T13:10:14.440

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,
            )
        ),
      )
  )
)

score 0 · Answer 10 · answered Sep 03 '18 at 13:00

0

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.

answered Sep 03 '18 at 13:00

Marcin Szałek

4,609
5
30
43

Border is visible. Issue with border radius for child widget.Here is image link http://putul.io/JWDFnTYTl. In child widget not applied parent widget border which one i gave. @MarcinSzałek – NIRAV PATEL Sep 03 '18 at 13:18

border radius not apply inside container widget

10 Answers10