2

Please see the following JSFiddle:

http://jsfiddle.net/zScKW/

Notice that the child div clips the border of its parent. If I remove the border (but keep the rounded corners), the item clips as we would expect. Firefox 4 renders this markup as I expect, with the item clipped before the border starts. Chrome, however, does not clip the child until the border's outer edge is reached.

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

(please note before you vote to close, this is a different bug than the multiple threads about a firefox 3.5/Chrome bug which prevented items from being clipped at all by rounded borders)

Chris Sobolewski
  • 12,819
  • 12
  • 63
  • 96

3 Answers3

2

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

mellamokb
  • 56,094
  • 12
  • 110
  • 136
commanderj
  • 21
  • 2
1

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

border-top-left-radius: 5px;

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

Shaz
  • 15,637
  • 3
  • 41
  • 59
0

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

Binyamin
  • 7,493
  • 10
  • 60
  • 82