Bug 31949 – -webkit-border-image/-webkit-gradient should be altered by -webkit-border-radius

• Status: RESOLVED
• Resolution: WONTFIX
• Component: CSS

[David Gatwood]

The -webkit-border-radius should modify borders generated by the -webkit-border-image tag.  At a minimum, it should do so when the image is dynamically created (e.g. with -webkit-gradient).  Without that, gradients can only be used for very simplistic square borders.

While I'm suggesting improvements in this area, it would be really nice to have a clean CSS way of specifying that these borders be beveled (equivalent to inset/outset on standard borders).

The Editor’s Draft of CSS Backgrounds and Borders Module Level 3 disagrees:
“ Backgrounds, but not the border-image, are clipped to the appropriate curve (as determined by ‘background-clip’).” <http://dev.w3.org/csswg/css3-background/#the-border-radius>.

[David Gatwood]

The problem is that there's a fundamental difference in the way a manually constructed border image and a programmatically generated border image (e.g. -webkit-gradient) should be treated.  The former should definitely not be cropped because the creator can easily crop it if desired by adding an alpha channel.  The latter definitely should be cropped because otherwise there's no way to crop it.

Perhaps the specification could be amended to say that the border-image should be cropped only if there is no alpha channel present in the border image?  That would cover both of the two likely use cases, and I can't think of any good argument for having a hand-built border-image with no alpha channel.

[Dave Hyatt]

Spec is pretty much final and still disagrees.

[David Gatwood]

Please take this up with the standards committee and strongly encourage them to *fix* the *spec*.  As written, it's just plain broken in a rather serious way.  As designed, it is not possible to do non-square borders with CSS3 unless you manually generate all the images in a graphics program.  That can't *possibly* be the intended behavior....

[Dave Hyatt]

(In reply to comment #4)
> Please take this up with the standards committee and strongly encourage them to *fix* the *spec*.  As written, it's just plain broken in a rather serious way.  As designed, it is not possible to do non-square borders with CSS3 unless you manually generate all the images in a graphics program.  That can't *possibly* be the intended behavior....

You're never going to get the images to perfectly match the border-radius curve across all browsers/implementations of border-radius. I think the expectation is that designers would build the rounding into the border-image itself in order to guarantee pixel-perfect rendering everywhere.

There have already been discussion threads on this issue on www-style, and I think it has been satisfactorily resolved. If the spec changes, we can re-open the bug, but I don't think it will.