Re: border-radius on replaced elements

On May 14, 2008, at 1:23 PM, David Hyatt wrote:

>
> With the image-fit and image-position properties and border-radius,  
> we're clearly moving in a direction where overflow needs to be  
> supported on replaced elements.  One of the use cases that has come  
> up over and over again for Apple has been rounded corners on <img>  
> and <video> elements.  I believe that - by default - a border-radius  
> should clip the foreground content of replaced elements.  However I  
> also think that the foreground content of replaced elements could be  
> considered overflow (for compatibility with the image-fit and image- 
> position properties).
>
> I'd like to propose that the suggested UA default be:
>
> img, video, input[type=image] { overflow: hidden }
>
> For these elements (and possibly some others that I might not be  
> thinking of).

I can think of input[type=text] with a border radius, in order to get  
a lozenge-shaped text field. I would expect it to be clipped so that  
whatever was behind it would show through at the corners outside of  
the curved border. I'm not sure how you would specify curved left  
corners on a text-area though, since it is already pretty much an  
overflow:auto (or in some implementations an overflow:scroll).


> Alternatively we could just allow UAs to apply the border-radius  
> clip to replaced elements at their discretion.  I believe it's  
> important that authors not have to do anything to get the right  
> behavior, though, since the author expectation is that the border- 
> radius should clip the image.

I agree with that last sentence.

>
>
> dave
>
>
>
>
>

Received on Thursday, 15 May 2008 03:24:02 UTC