Re: border-radius on replaced elements

Brad Kemper wrote:
> 
> 
> 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).

Backgrounds are always clipped to the border radius. Also when
overflow is hidden content also gets clipped to the border radius.
The concern is about whether content gets clipped to the border radius
when overflow is visible: in general content doesn't get clipped to
the border-box, so replaced elements would have to be special-cased
here.

~fantasai

Received on Thursday, 15 May 2008 05:06:12 UTC