On Feb 9, 2012, at 6:54 PM, Markus Ernst wrote:
> I encountered that rounded corners do not seem to apply to child elements:
>
> […]
> In this example, the right corners of the red child element are not rounded
> in recent versions of Firefox, Opera, Chrome, and IE9.
>
> Is this the expected behavior? I did not find anything on the behavior of
> child elements in the spec:
> http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-border-radius
Yucca already gave you the core of the answer.
In addition: border-radius does not clip child elements.
If you want clipping to happen, try
.roundCorners { overflow: hidden; }
or force the child box to inherit the border-radius
> Now, if there is a border applied to the container element, the inner element
> is not expected to inherit the border, but it is expected to be placed inside
> the border, rather than covering it.
> In the case of rounded corners, I would accordingly expect the inner element
> to be rounded at the edges of the outer element, rather than covering the
> rounded corners (and even covering a possible border of the container element
> at the corners).
But the child is not offset by corner (border-radius is a bit a misnomer, it
should actually be 'corner-radius'). With 'border', the child element is moved
(it cannot cover the border unless forced to do so).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
