Why does the border get cut off when using border-radius?

Please see this fiddle:

jsfiddle example

notice the 开发者_开发百科headers are cutting off the border-radius, any ideas why?

Thanks

The gradients of the .pod-headers are overlapping the round corners on the .pods because you didn't round the .pod-headers. They don't inherit the round corners from their parent elements.

To fix it, round the top corners (only) of your .pod-header elements using this CSS:

    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;

You are giving one class the border radius and the inner class the background but no radius (so it still has a square corner).

Check out the CSS in the updated fiddle

You also need to set the border-radius on the inner div.

For example Use this:

#pod-container .pod .pod-header {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* W3C */
    border-radius: 6px;

    border-bottom: 1px solid #CCC;
}