Border-radius hidden by inner div

css, html

Solution

Use `overflow: hidden` on your `#box` element:

#box {
    height: 250px;
    width: 250px;
    border-radius: 10px;
    background: #bbb;
    overflow: hidden
}

See the updated Fiddle here: http://jsfiddle.net/AAUbA/2/

As an aside: it's worth considering adding in vendor-prefixes to ensure better cross-browser compatibility.

This is a good write-up on how to use the property. You can use this tool to auto-generate the CSS you need.

Problem

I have a div as a content box and have another div inside that for the title. The outer div has border-radius set but the inner div hides it. HTML: ``` <div id='box'> <div id='boxTitle'> This is the title </div> </div> ``` CSS: ``` #box { height: 250px; width: 250px; border-radius: 10px; background: #bbb; } #boxTitle { width: 100%; background: #000; color: #fff; text-align: center; } ``` JSFiddle: http://jsfiddle.net/AAUbA/ How do I fix it so I can see the rounded corners at the top of the outer?

Original source