[css-borders] manipulating `border-image-source` before slice
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
https://drafts.csswg.org/css-backgrounds/#border-images
The border-image spec is missing the ability to manipulate border-image-source in the same ways we can manipulate background-image and mask-image. Note that this is about manipulating the border-image-source itself before it is sliced.
suggesting adding:
border-image-source-sizeborder-image-source-repeatborder-image-source-position?- etc
- comma separated multiple border-image-sources, -repeats, -sizes
use cases:
- Creating this sort of image to use for a corners only border should be doable with conic-gradient but currently isn't.

border-image-source: conic-gradient(#0000 0 270deg, #000 270deg);
border-image-source-size: 66.6% 66.6%;
border-image-source-repeat: repeat;
-
other css pattern borders like checkerboard borders, diamonds etc... Many of which would currently require multiple images
-
border-image-source-repeatwould allow the use of a single image to be used as stamps around the border. One icon image repeated to create a 3x3 grid of that icon to use as a border-image-source.
border-image-source-size: 33.3% 33.3%;
border-image-source-repeat: repeat;
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the linked CSS Backgrounds border-images section and compare how background-image and mask-image are manipulated. Review the proposed source size, repeat, position, and multiple-source cases, then determine the required specification changes and use cases. Done means the CSSWG has a resolved, implementable definition for the requested behavior.
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
- Needs clarification
- Newbie friendliness
- 25/100