How to have a rounded border with only 3 sides?

Question

How can I add a rounded border for only 3 sides of the box? It's giving me errors if i add an "only" per sides if there is a border radius included.

this is my Code

Container(
  padding: const EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    border: Border.all(color:Colors.grey, width: 2.5),
    borderRadius: BorderRadius.circular(13.0),
  ),
  child: child,
)

Does this answer your question? [Container with 3 borders and radiuses](https://stackoverflow.com/questions/72993462/container-with-3-borders-and-radiuses) — EJoshuaS - Stand with Ukraine, Jul 15 '22 at 20:51

CopsOnRoad · Answer 1 · 2021-08-15T15:08:11.110

3

I didn't quite get the screenshot but to have border for three sides, say for only left, right and bottom, use:

final borderSide = BorderSide(color: Colors.white, width: 2);

Container(
  decoration: BoxDecoration(
    border: Border(
      left: borderSide,
      right: borderSide,
      bottom: borderSide,
    ),
  ),
  child: child,
)

edited Aug 15 '21 at 15:08

answered Aug 15 '21 at 14:51

CopsOnRoad

237,138
77
654
440

2

You cannot use border radius in this case - will get an exception "A borderRadius can only be given for a uniform Border." – Bitlejuce Do Jul 15 '22 at 11:48

score 1 · Answer 2 · answered Aug 15 '21 at 14:36

1

simply use .only in place of .circular

Container(
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
      border: Border.all(color:Colors.grey, width: 2.5),
      borderRadius: BorderRadius.only(topLeft: Radius.circular(13.0),topRight: Radius.circular(13.0)),
    ),
    child: child,
  )

Similarly you can add bottomLeft and bottomRight in .only

answered Aug 15 '21 at 14:36

Deepak Lohmod

2,072
2
8
18

2

Border.all(color:Colors.grey, width: 2.5) will draw 4 borders, the question is how to have 3 borders + radius – Bitlejuce Do Jul 15 '22 at 11:46

How to have a rounded border with only 3 sides?

2 Answers2