W3C home > Mailing lists > Public > www-style@w3.org > February 2014

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

From: Sebastian Zartner <sebastianzartner@gmail.com>
Date: Sun, 9 Feb 2014 20:00:41 +0100
Message-ID: <CAERejNZdUC_s07TOZeGSx3SNzefv8y-iKOrCFsixKZ6LvJYAow@mail.gmail.com>
To: Brad Kemper <brad.kemper@gmail.com>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 8 February 2014 06:29, Brad Kemper <brad.kemper@gmail.com> wrote:

> > On Feb 7, 2014, at 9:19 AM, "Tab Atkins Jr." <jackalmage@gmail.com>
> wrote:
> >
> > 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.
>
> Right. 'border-image-offset' of greater than zero is the author saying he
> wants that overhang. That couldn't work if corners were clipping (or at
> least it would be very strange looking). But we also had good reasons for
> not wanting other images to be clipped by rounded corners. I recall there
> was significant debate, but consensus was achieved.


Would be great if somebody could point me to that debate.


> I think we were mostly focused on url() when we decided that.
>

Obviously. :-) Though there are also use cases for url(), for which people
would want clipping.


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

No, allowing <image> in border-color sounds wrong to me. People may want to
define the color separately from the image like for background-color vs.
background-image.

That would be one route. Another would be to add a new value to
> 'border-image-offset', called 'none' perhaps, that would be just like zero,
> but with the clipping at the rounded corners you desire. Would be useful on
> raster images sometimes too, if you wanted to follow the outer edge of the
> border and let box-shadow provide the shadow instead of building it into
> the image.
>

I am also not sure whether border-image-offset should be reused for that
purpose. The offset is unrelated to clipping.

Again, what speaks against adding a new property controlling the clipping
of the border? The default value would be to let it overhang the border box.

Sebastian
Received on Sunday, 9 February 2014 19:01:28 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:19 UTC