CSS border-image

[jsnkuhn]

Description

Authors can specify an image to be used in place of the border-style. In this case, the border’s design is taken from the sides and corners of an image specified

Rationale

• "buginess" is one of the often cited reasons for lack of use.

• will likely never be high priority without a concerted effort to fix.

• mostly bugs around border-image-repeat round and space values

• big bug in chrome which makes using border-image at all difficult
  https://bugs.chromium.org/p/chromium/issues/detail?id=767352

• might need tests for vector vs raster border-image-source??
  https://bugzilla.mozilla.org/show_bug.cgi?id=1778032
  https://bugs.chromium.org/p/chromium/issues/detail?id=1342292

Specification

https://drafts.csswg.org/css-backgrounds/#border-images

Tests

https://wpt.fyi/results/css/css-backgrounds?label=experimental&label=master&aligned
note that there are some border-image tests are titled css3-border-image for some reason.

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there was only a single mention of border-image, so not enough to make the top list in #248.

While it was just a single response, that particular web developer did seem passionate about it:

border-image, border-image, border-image, @property, lch(), attr(), styling HTML form elements, styling scrollbars, BORDER-IMAGE INCONSISTENCIES WHEN SCALING HOLY MOLY, background-attachment: fixed (too slow!)

[foolip]

In the MDN short survey on CSS & HTML, "CSS images (border-image, image(), image-set())" was selected by ~19% of survey takers, putting it in the middle third of the 20 options. (There is some uncertainty as with any survey data.)

Since this option bundled together multiple proposals we can't know what resonated, but given the State of CSS results I'm fairly certain it was mostly image-set().

[foolip]

Thank you for proposing border-image for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the Border Image focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.