w3c / w3c/csswg-drafts

[css-borders-4] Allow to individual values for sides in `border-clip`

Open
#9,635 0 comments 0 reactions 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 border-clip shorthand currently sets all four sides to the same value. Though it would make sense to extend its syntax to set different values for the four sides.

To do that, the syntax of grid-area could be reused, i.e.

border-clip = <border-clip-pattern> [ / <border-clip-pattern> ]{0,3}

<border-clip-pattern> = normal | [ <length-percentage [0,∞]> | <flex> ]+

where the number of values works the same as for the box properties like margin. I.e. one specified value applies to all four sides. Are two values specified, the first applies to the top and bottom and the second to the left and right side. With three values specified, the first one applies to the top, the second to the left and right and the third to the bottom side. And are four values specified, they are applied to the top, right, bottom, and left sides in that order.

Sebastian

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 locating the border-clip definition in the CSS Borders 4 material and compare its syntax with the grid-area pattern referenced in the issue. Confirm how one, two, three, and four values map to sides, then update the specification and any affected examples or checks so the proposed shorthand behavior is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend, 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.