On 27/07/2012 6:01 AM, Markus Ernst wrote:
Am 25.07.2012 14:43 schrieb John:
The code below produces a round-corner in the lower left, but an image
I place inside it doesn't have its lower left corner rounded..why is
that?
Besides the solution approaches already discussed, the "why" is because
rounded corners of a container do not clip the contents of the container.
I personnally think that this is not a good approach, and that it would
make common use cases easier to handle if the rounded corners of a
container would clip the contents, be it text or an image. If the author
does not wish the clipping, appropriate padding is needed anyway. I do
not see any use cases for not clipping the contents.
But for any reason the people who specify CSS seem to think differently;
I admit that I have not searched the archives of the CSS WG for
discussions on this topic.
Does overflow:hidden not work?
<!doctype html>
<style>
h1 {
background: yellowgreen;
border-radius: 50%;
width: 10em;
font-size: 500%;
overflow: hidden;
}
</style>
<h1>This is a header</h1>
--
Alan Gresley
http://css-3d.org/
http://css-class.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/
