Hello!
I encountered that rounded corners do not seem to apply to child elements:
.roundCorners {
width:500px;
height:200px;
margin:1em auto;
background:yellow;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.roundCorners div {
width:200px;
height:200px;
float:right;
background:red;
}
<div class="roundCorners">
<div>Hello</div>
</div>
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
I can't imagine that all current implementations are buggy, but from an
author's POV this behavior does not seem useful to me. If I apply
rounded corners to a container element, I would not want to re-apply
them to every child that might be placed in a corner. Is there a decent
solution to this? Or do you think I should raise this in the www-style list?
Thanks for your comments!
Markus
______________________________________________________________________
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/
