Re: [css3-background] Corner clipping for images and gradients

On Fri, Feb 7, 2014 at 1:09 AM, Sebastian Zartner
<sebastianzartner@gmail.com> wrote:
> In Mozilla bug 969263[1] the question came up whether to clip gradients,
> elements and images defined in border-image. The current WD says[2] this:
>
> "A box's backgrounds, but not its border-image, are clipped to the
> appropriate curve (as determined by ‘background-clip’)."
>
> According to David Baron the WG's intent for url() is when defined in
> border-image it is allowed to *overhang* the box.
> Though this may not be what the author expects, especially in cases where
> gradients or elements are used. See the test case on the report mentioned
> above.
>
> One idea I can come up with to solve this is to add a new property
> ‘border-clip’, which accepts the same values as ‘background-clip’ plus an
> additional value, which avoids clipping, e.g. ‘none’.

Border-image does specifically overhang the border-radius curve.
Otherwise, there's no good answer to what the outset values mean.

While border-image *can* be combined with gradients to make a gradient
border, it's not the ideal in all cases, as you found.  What you'd
want for that case is to allow <image> types in border-color.

~TJ

Received on Friday, 7 February 2014 17:20:35 UTC