According to the specs:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
http://www.w3.org/TR/css3-background/#the-border-radius
This means that an overflow: hidden
on #outer
should work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:
Rounded corners now clip content and images (if overflow: visible is not set).
https://developer.mozilla.org/en/CSS/-moz-border-radius
So you'll still need the fix, just shorten it to:
#outer {
overflow: hidden;
}
#inner {
-moz-border-radius: 10px 10px 0 0;
}
See it working here: http://jsfiddle.net/VaTAZ/3/
What would be wrong with this?
#outer {
display: block; float: right; margin: 0; width: 200px;
background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }
#outer, #inner{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
If you want sharp edges on the bottom: Use these :
border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft -moz-border-radius-topright
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With