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

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>