CODEWITHSUNDEEP
htmlcss
Wildcard27
Wildcard27

Reputation: 1459

Border-radius hidden by inner div

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?

Upvotes: 8

Views: 9383

Answers (3)

Daan
Daan

Reputation: 2799

Give #boxTitle the same radius on both the top corners as the box. As already suggested you can also set the overflow to hidden with overflow:hidden;. Both working but if you want to add something outside of #box it won't be displayed, with this code it will be displayed:

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;
    border-top-right-radius:10px;
    border-top-left-radius:10px;
}

JSFiddle demo

Upvotes: 5

Sunil Kr. Yadav
Sunil Kr. Yadav

Reputation: 283

add overflow: hidden on your #box element.

Upvotes: 3

johnkavanagh
johnkavanagh

Reputation: 4674

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.

Upvotes: 21

Related Questions