Re: border-radius on replaced elements

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).
> 
> 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'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.

~fantasai

Received on Thursday, 14 August 2008 21:05:53 UTC