Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome not honoring border radius on children

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?

like image 472
isaiah Avatar asked Sep 19 '12 23:09

isaiah


People also ask

Why border-radius is not working?

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.

How do you code border-radius?

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.

Does border-radius inherit?

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.


1 Answers

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:

  • Forcing child to obey parent's curved borders in CSS
  • CSS Border radius not trimming image on Webkit
  • How to make CSS3 rounded corners hide overflow in Chrome/Opera
like image 191
Petah Avatar answered Oct 01 '22 04:10

Petah