I'm having a bit of trouble getting Chrome to honor the border radius on child elements.
Here's the setup:
<div class='wrapper'>
<img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>
if the wrapper is a positioned element (e.g. position: relative) and has a border-radius, then the border radius will not be applied to the img content.
it doesn't have to be an image, either. any content that fills the background.
Here's a reduced example page that shows off the problem. View in Safari, Mobile Safari, Firefox, or IE and the corners of the image will be clipped to the round corner. Viewed in Chrome the image overflows the corner (despite the overflow:hidden css) and looks ugly.
Have a look: https://dl.dropbox.com/u/433436/no-rounding/index.html
The question: Is there some workaround for this that's not too insane? Does anyone know why this affects one WebKit based browser and not others? Perhaps this is coming to update in Chrome soon?
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.
CSS Demo: border-radius Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
You need to remove the position: relative
If your really need position relative then you can double wrap your element:
HTML:
<div class="outer">
<div class="wrapper">
<div class="inside">
</div>
</div>
</div>
CSS:
.outer {
position: relative;
}
.wrapper {
width: 100px;
height: 100px;
overflow: hidden;
border: 3px solid red;
border-radius: 20px;
}
.inside {
width: 100px;
height: 100px;
background-color: #333;
}
http://jsfiddle.net/eprRj/
See these related questions:
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