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

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

In the top row, we have a box with curved corners and nothing inside.
On the left, it just has a plain border; on the right, it has an inset
box-shadow.

In the second row, another box is nested inside that box.  The nested
box has a colored background and square corners.  Notice that the inner
box's background is drawn on top of the curved border and the shadow,
which looks quite ugly (IMO).

The third row is the same as the second row, but with overflow:hidden
applied to the outer box.  Firefox and Opera will render this row the
same as the second row.  Chrome and Safari clip the nested box's
background to the *outer* curve of the border, but are still drawing
the background on top of the border.

Finally, the fourth row is an 'artist's conception' using SVG of what I
imagine people actually want from this setup: the inner background is
clipped to the outer curve of the outer border, and both the outer
border and the outer box-shadow are drawn *on top of* the inner
background.  (The SVG box-shadow is a little hard to see, because I'm
not very good at writing SVG filters.  Sorry about that.)

As far as I know, in the absence of border-radius, border-image, or
inset box-shadow it is impossible to make a nested box's background
overlap a containing box's border.  It seems to me that putting the
nested background under the containing border (and inset shadow) and
clipping it to the curve is always the right thing.

zw

Received on Sunday, 11 April 2010 00:15:22 UTC