Re: border-radius on replaced elements

 -------------- Original message ----------------------
From: fantasai <fantasai.lists@inkedblade.net>
> 
> Brad Kemper wrote:
> > 
> >> I've added a non-normative note saying
> >>  It is recommended that the UA stylesheet apply overflow: hidden to
> >>  elements (such as the <img> element in HTML) that are expected to be
> >>  replaced elements so that their corners automatically trim to the
> >>  border radius.
> >>
> >> I can make this normative if you like.
> > 
> > I think this should only be if the element with border radius also has 
> > non-visible overflow. Otherwise, if the image is larger than the box, 
> > there will be an odd shape in those corners missing from the visible 
> > overflow.
> > 
> > Also, if the box is set to non-visible overflow, it should clip any 
> > contents at the rounded corners, including text.
> > 
> > I created a  sort of test case using webkit-prefixed properties here:
> > 
> > http://bradclicks.com/cssplay/radiusTrim.html
> > 
> > The fourth and fifth examples would be effected by the note in the 
> > draft, with the forth one looking like it does with background-image, 
> > but the fifth would look odd.
> 
> I'm only saying the img element itself should get 'overflow: hidden',
> not any elements surrounding it.
> 
> ~fantasai
> 

Oh. You mean if a border radius is set directly on the IMG itself. True, I misunderstood. However, that still only makes sense if "overflow: hidden" actually hides the part of the content that is outside of the curve of the border-radius.* And, my examples show that it does not, except for background properties. (Sorry that it might take a few seconds to load the image in my examples, depending on your connection speed.) 

So, I suppose I am proposing that the curve of the border-radius DOES act as a mask of its contents, if the element with the border-radius is set to "overflow: hidden" (or any overflow value other than "visible"). It doesn't really make sense to me that the mask created by "overflow: hidden" should be a square cornered rectangle, when the shape of the element doing the clipping does not have square corners.

So I would like that added, while keeping also what you have in regard to border radius is set directly on the IMG itself. And I vote for making it normative (or I would, if I got to vote).

* Well, I suppose the note would still make sense if the actual visual part of an IMG were considered a background property of the IMG element. Otherwise, there is no existing definition I know of for what effect "overflow: hidden" would have on an IMG, and you could just as well leave that part out.

Received on Wednesday, 10 September 2008 19:31:57 UTC