I have a div inside of another div. #outer
and #inner
. #outer
has curved borders and a white background. #inner
has no curved borders and a green background. #inner
extends beyond the curved borders of #outer
. Is there anyway to stop this?
<div id="outer">
<div id="inner"></div>
<!-- other stuff needs a white background -->
<!-- bottom corners needs a white background -->
</div>
With the css:
#outer {
display: block; float: right; margin: 0; width: 200px;
background-color: white; overflow: hidden;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#inner { background-color: #209400; height: 10px; border-top: none; }
No matter how I try it still overlaps. How can I make #inner
obey and fill to #outer
's borders?
edit
The following hack served the purpose for now. But the question stands (maybe to the CSS3 and webbrowser writers): Why don't child elements obey their parent's curved borders and is there anyway to force them to?
The hack to get around this for my needs for now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the top two of the inner element.
#inner {
border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}