CODEWITHSUNDEEP
parent-childcss
Fuego DeBassi
Fuego DeBassi

Reputation: 3027

Child elements bg color clips to parents border-radius

Anyone know of a surefire way to force child elements to stay in the border-radius of their parents?

Here is a js fiddle sample I'm working with: http://jsfiddle.net/fuego/qCNRZ/

Markup:

<div id="outer">
    <div id="inner">
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
        Nah nah nah<br/>
    </div>
</div>

CSS:

#outer {
    width: 300px;
    background: red;
    border-radius:20px;

}

#inner {
    background:blue;
}

I simply want the container to appear blue now, but with the parents rounded edges. I updated the fiddle to reflect.

Upvotes: 11

Views: 4836

Answers (4)

Griffin
Griffin

Reputation: 11

Adding "overflow: hidden;" to the outer div will solve your problem. Cheers.

Upvotes: 1

Daan Mortier
Daan Mortier

Reputation: 1898

Based on your example it would suffice to add overflow:hidden to your #outer element.

Upvotes: 30

Sotiris
Sotiris

Reputation: 40096

The only way to achieve what you wish with pure css is to add border-radius for both div.

#outer {
    width: 300px;
    background: red;
    border-radius:20px;
    height:400px;
}

#inner {
    background:blue;
    border-radius:20px 20px 0 0;
    padding-left:10px;
}

Demo: http://jsfiddle.net/tZ8AL/1/

Upvotes: 1

albert
albert

Reputation: 8153

just needed margins set http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

Upvotes: -1

Related Questions