Why does a background overlay my rounded corners?

Question

When I use CSS rounded corners, they look like this, and it's great:

But if I specify a background color for an element inside them (in this case a simple <p> tag), the background color overlays the rounded corners, like so:

How can I keep my pretty rounded corners without the background color drawing over them? I tried specifying the same rounded corners for the element inside, but if I do that the background color doesn't completely fill the space:

Answer 1

Don't specify the background color in an inside element, but just that particular element (with the border).

Answer 2

Why don't you set the background colour of the outside element to the same as it's border? That way you won't have the little white space on the corners like you see in your image.

You'll never get it completely perfect, but it is possible to get it as close to perfect so that users just browsing won't see a difference.

Answer 3

A little math may help too, taking border width into account. If your border radius is 5px, and border width is 1px, then the inner element should use border-radius 4px (5px - 1px border). Experiment and see.