65

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

10 Answers 10

63

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

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.

4
  • 4
    This should be accepted answer.
    – iStar
    Oct 22, 2021 at 7:22
  • 3
    This is the best answer since using ClipRRect is more processor intensive. Jan 10, 2022 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. May 6, 2022 at 10:41
  • you'r great man! Aug 10, 2022 at 7:07
28

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

19

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

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,
  ),
)
1
  • 1
    ClipRRect with borderRadius is the best solution that I found, really thanks :)
    – g4s0l1n
    Apr 9, 2021 at 19:56
7
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

0
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,),
                    )
    ),
  )
)
)
2
  • Already defined border to parent container. Is it necessary to add again in child container. ? @Zulfiqar Sep 4, 2018 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, 2021 at 11:07
3

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),
                              ],
                            ),
1
  • Why use gradient and how does this answer the question?
    – Iule
    Aug 23, 2021 at 10:28
2

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

1
  • 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 Sep 3, 2018 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.