Geek Answers Handbook

Chrome does not respect border radius in children

I'm having trouble getting Chrome to respect the border radius for children.

Here's the setting:

<div class='wrapper'> <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' /> </div>

if the shell is a positioned element (for example, position: relative) and has a border radius, then the border radius will not apply to the content img.

it also should not be an image. any content filling the background.

Here is a sample page that shows the problem. View in Safari, Mobile Safari, Firefox or IE, and the corners of the image will be cropped to a round corner. When viewed in Chrome, the image overflows the corner (despite overflow: hidden css) and looks ugly.

Take a look: https://dl.dropbox.com/u/433436/no-rounding/index.html

Question: Is there any workaround for this that is not too crazy? Does anyone know why this affects one WebKit-based browser and not others? Perhaps this will appear in Chrome soon?

+7
source share
4 answers

You need to remove position: relative

If you really need a position, then you can wrap your element twice:

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 the following questions:

+5
source

Try to give the child elements a border-radius half of the given parent element.

From this answer: stack overflow

0
source

Just add

  .wrapper: first-child {
     border-radius: 20px;
     }
You will need to adjust the radius, but depending on the thickness of the border and remove it from the child. I would also add -moz- to the prefixes for older supporting browsers, etc.
0
source

Adding display: block; or display: inline-block; to the parent can solve it.

0
source

More articles:


All Articles