W3C home > Mailing lists > Public > www-style@w3.org > April 2010

Re: [css3-background] Curved borders intersecting backgrounds of inner boxes

From: Brad Kemper <brad.kemper@gmail.com>
Date: Sun, 11 Apr 2010 23:03:04 -0700
Cc: W3C Emailing list for WWW Style <www-style@w3.org>
Message-Id: <214E0AEE-A1AA-47ED-95D5-340294F5550B@gmail.com>
To: Zack Weinberg <zweinberg@mozilla.com>

On Apr 11, 2010, at 4:17 PM, Zack Weinberg wrote:

> Zack Weinberg <zweinberg@mozilla.com> wrote:
>> Have a look at
>> http://people.mozilla.org/~zweinberg/inner-background-clip.xhtml in a
>> browser that supports border-radius, inline SVG, and preferably also
>> inset box-shadow.  (If you don't have inset box-shadow, ignore the
>> right column.)
> FYI, I've uploaded a corrected version of this test case.  The box
> shadows work in Webkit now, and the SVG box shadow is a much closer
> approximation to how Firefox and Webkit draw it.  Also, it has links to
> screen shots.

It is pretty weird that Webkit still clips to the outside of the border at the curved borders, when the overflow is 'hidden', and that mozilla still doesn't clip to any curve. I brought this up some time ago, and the following was added to the backgrounds and borders module to clarify what should happen:

> Backgrounds, but not the border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.


Received on Monday, 12 April 2010 06:03:39 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:34 UTC