This is my problem: I want to make a parent div round using ronded corners, and I want a child of that element (with a colored background) to remain square, but I don't want the corners of the square to point outside the round parent. This is not that difficult to fix in most browsers, I simply add overflow:hidden to the parent and viola. But, in Safari that fix does not work - the square corners of the child points out of the round parent. So my question is, is there a way to get rounded corners on a parent to affect a child in Safari?
There are two obvious workarounds, but none of them applies in this case:
- The child must fill up the entire space of the parent, so adding a padding to the parent (as mentioned here) is not an option.
- Neither can I add rounded corners to the child since the child is resized by javascript and used as a status indicator, and therefore needs to be square.
Here is a jsFiddle of my code: http://jsfiddle.net/henrikandersson/4Lnbt/
This is the result in Chrome (left) and Safari (right):
Update: I'm running Safari 5.1.7 in both OS X and Windows, same result.
