Reputation: 3027
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
Reputation: 11
Adding "overflow: hidden;" to the outer div will solve your problem. Cheers.
Upvotes: 1
Reputation: 1898
Based on your example it would suffice to add overflow:hidden
to your #outer
element.
Upvotes: 30
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
Reputation: 8153
just needed margins set http://jsfiddle.net/jalbertbowdenii/83Xrs/2/
Upvotes: -1