Border radius on parent div

Question

There are three divs that are inside the parent div with display:flex .

I want to create a border-radius for parent div but something doesn't work.

My code is:

 <div style="height:50px;display:flex;width:500px;border-radius: 20px;"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

The border-radius is invisible. It is possible for the child to have width:0% or width:100% so the border-radius should be applied for the parent container.

How is it possible to to that?

Answer 1

add overflow:hidden to parent div

 <div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow:hidden"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

Answer 2

Try this:

 <div style="height:50px;display:flex;width:500px;border-radius: 20px;overflow: hidden"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

so adding overflow: hidden to the parent should fix the problem

Answer 3

Just gotta add overflow: hidden to the parent div OR apply the border-radius to the first and last children. Sometimes, certain elements don't react nicely to the parent clipping them and respond better to being clipped directly. Here are both methods:

Border-radius on parent:

 body > div { border-radius: 20px; overflow: hidden; }

 <div style="height:50px;display:flex;width:500px;"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>

Border-radius on children:

 body > div > div:first-child { border-radius: 20px 0 0 20px; } body > div > div:last-child { border-radius: 0 20px 20px 0; }

 <div style="height:50px;display:flex;width:500px;"> <div style="height:50px;width:30%;background:red"></div> <div style="height:50px;width:30%;background:blue"></div> <div style="height:50px;width:40%;background:yellow"></div> </div>