w3c / w3c/csswg-drafts

[css-borders] manipulating `border-image-source` before slice

Open
#7,777 5 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

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-size
  • border-image-source-repeat
  • border-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.

Screenshot 2022-09-20 at 20-31-54 ExLXJoj

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-repeat would 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.