Question about CSS Border radius

I created an example here: https://codepen.io/allisonching/pen/JjPpBvg

I found that if I apply background color to the children element, the container border radius will be covered. And I have to apply border-top-right-radius and border-top-left-radius to the children element. Can someone explain why to me? Or any better approach to achieve the same result?

Thank you.

Not sure exactly what you are asking. But if it is how to make it look the same with shorthand it would be

.wrapper1 {
  padding: 10px;
  background: yellow;
  border-radius: 5px 5px 0 0;
}

Shorthand goes top left, top right, bottom right, bottom left.

OP meant that the upper corners of the yellow box are “bleeding through” the rounded corners of the box. It’s more obvious when a larger border radius is chosen for the box.

Other than setting the border radius of the wrapper, you can add overflow: hidden to the box to prevent the bleed through.

2 Likes

@kevcomedia I noticed that after my comment. .box and .wrapper1 are the same width. Setting a border radius on .box makes the corners smaller than the corners of .wrapper1. Overflow: hiddden works to keep the same style. Another way to make it not overflow would be adding some margin to .wrapper1, but that would not give the exact same style.

1 Like

It makes more sense now. Thanks for explaining it to me.