Geek Answers Handbook

Chrome kids css3 clip rounded border?

See the following JSFiddle:

http://jsfiddle.net/zScKW/

Notice that the child div binds the border of its parent. If I delete the border (but keep the rounded corners), the element is pinched, as expected. Firefox 4 displays this markup, as I expect it, with the item cropped to the start of the border. However, Chrome does not crop the child until it reaches the outer edge of the border.

Who has this behavior right, and is there a hack? I am fine leaving it in chrome if this is a bug that will be fixed, but I will need to tweak the layout if it displays the specification in Chrome.

(note, before voting for closing, this is a different error than several threads about the firefox 3.5 / Chrome error, which did not allow elements to be trimmed with rounded borders at all)

+2
source share
3 answers

Give the child element a radius of half the border-radius its parent .

 border-top-left-radius: 5px;

Example here: http://jsfiddle.net/zScKW/1/

+1
source

Actually you need to add position:relative to the child element.

+2
source

I post a bug related to it in http://code.google.com/p/chromium/issues/detail?id=99364

0
source

More articles:


All Articles