Not able to set BorderRadius at bottomRIght side for Container

Question

I want to give bottom right corner radius to Container. For that I have set right and bottom border of the Container.

However, it is not allowing me to set the bottom right corder radius.

The following is the code.

      Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              bottomRight: Radius.circular(6),
            ),
            border: Border(
              right: BorderSide(
                  color: Colors.red,
                  width: 1),
              bottom: BorderSide(
                  color: Colors.red,
                  width: 1),
            ),
          ),
          child: Text(
            blockName,
            textAlign: TextAlign.left,
          ),
        )

When I ran above code on console I was getting following error.

════════ Exception caught by rendering library ═════════════════════════════════
A borderRadius can only be given for a uniform Border.
The relevant error-causing widget was
Container                                      transfer_content_screen.dart:537
════════════════════════════════════════════════════════════════════════════════

just remove border radius OR checkout https://stackoverflow.com/questions/58812778/a-borderradius-can-only-be-given-for-uniform-borders — Ninad7N, Aug 04 '23 at 05:45

Ninad7N · Answer 1 · 2023-08-04T06:57:11.557

I found a workaround, try this

 Center(
      child: SizedBox(
        height: 40,
        width: 90,
        child: Stack(
          children: [
            Container(
              padding: const EdgeInsets.all(8),
              decoration: const BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(6),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 1, bottom: 1),
              child: Container(
                height: double.infinity,
                width: double.infinity,
                padding: const EdgeInsets.all(8),
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(6),
                  ),
                ),
                child: const Center(
                  child:  Text(
                    "blockName",
                    textAlign: TextAlign.left,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ),

Though I need to do some modifications but this answer was very close to what I was looking for. Thanks. — Mahendra, Aug 07 '23 at 12:35

score 0 · Answer 2 · answered Aug 04 '23 at 05:48

Please try this code

ClipRRect(
        borderRadius: BorderRadius.only(
          bottomRight: Radius.circular(30),
        ),
        child: Container(
          padding: EdgeInsets.all(8),
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
              right: BorderSide(
                color: Colors.red,
                width: 2.0,
              ),
              bottom: BorderSide(
                color: Colors.red,
                width: 2.0,
              ),
            ),
          ),
          child: Text(
            "blockName",
            textAlign: TextAlign.left,
          ),
        ),
      ),

the bottom right border is cutting off. The border should also be shown. It should not be cut off. — Mahendra, Aug 04 '23 at 06:00

Not able to set BorderRadius at bottomRIght side for Container

2 Answers2