Question

I have a div with border-radius: 20px applied to it. The first element inside of said div is an h2 with a background color. The div's radius does not affect the h2 at all so I end up with two pointed corners sticking out of my div. I tried applying a radius to the top right and top left corners of the h2 but this left a tiny sliver of white between the div's corner and the h2's corner.

I tried decreasing the h2 border radius but to completely remove the white it ends up bulging out from the div again….

What am I doing wrong? Thank you for your help!

Here’s a jsFiddle

My CSS is essentially:

#div {
border radius: 20px;
border: 2px solid #000;
}

#h2 {
margin-top: 0px;
border-radius: 20px 20px 0 0;
}

Answer 1

First of all you have some typo in your code
border-radius not border radius
Then, if you apply border-radius for all corners for an element that have an height less than border-radius itself then browser just apply the rounded corner on half of the height of the element. For example if you have a div that have 10ox height and if you apply 5px radius for every corner then browser just applies 5px of your 10px border-radius to each corner. It doesn’t mean you got 5px border-radius it means just 5 top pixels will affect.

In your sample the div doesn’t have enough height to accept 20px border-radius.
If you apply a height more that 40px then you can have perfect border-radius effect.

Look at the fiddle