w3c / w3c/csswg-drafts

[css-borders] allow negative values for `border-image-outset`

Open
#9,263 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

css-borders-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

The spec states that negative border-image-outset values are invalid but doesn't give an explanation as to why (https://drafts.csswg.org/css-backgrounds/#border-image-outset). This functionality seems useful. Granted one can build the "inset" into the image itself but it would be better to be able to do this in CSS and not have to hard code it into an image.

outline-offset (https://drafts.csswg.org/css-ui/#outline-offset) already does some very similar to this but does not have the restriction on negative values. The outline-offset spec listing does give an explanation about limitations. I wonder if the same sort of thing could be done for border-image-outset?

Negative values must cause the outline to shrink into the border box. Both the height and the width of the outside of the shape drawn by the outline should not become smaller than twice the computed value of the outline-width property to make sure that an outline can be rendered even with large negative values. User agents should apply this constraint independently in each dimension. If the outline is drawn as multiple disconnected shapes, this constraint applies to each shape separately.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the border-image-outset section with the referenced outline-offset specification and the CSS Backgrounds draft. Determine whether negative values can be specified consistently and what rendering constraints are needed; done means a resolved CSSWG issue with agreed specification wording.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.