w3c / w3c/csswg-drafts

[css-masking] should `mask-border` be `border-box-mask`?

Open
#9,352 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

fx-masking-1
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

Was playing around with mask-border and it isn't what I expected it would be. It seems that the mask-border goes through the border and the background layer behind it. I was expecting a property called mask-border to just mask the border itself.

https://drafts.fxtf.org/css-masking/#mask-borders

I'm aware that this demo is using the -webkit-mask-box-image implementation and it might just be an issue with that?:
https://codepen.io/jsnkuhn/pen/ExGZWqM

There is a similar property spec-ed called border-clip (css-borders-4) that appears to only clip the border as I would expect.
https://drafts.csswg.org/css-borders-4/#border-clip

It seems that the intention of what's spec-ed for mask-border is to use the 9-sliced image to make sure the corners of the mask don't stretch and distort. This is definitely useful but maybe the -webkit border-box-mask name is better for this.

Or possibly something like:
mask-image-source-slice
mask-image-slice

FYI, css masking is on Interop 2023 (https://wpt.fyi/interop-2023) not entirely sure if mask-border is included though. I'm guessing unpre-fixing the webkit syntax might be on vendors radar even if there aren't any tests for mask-border

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

Read the CSS Masking specification's mask-borders section and the CSS Borders 4 border-clip section first. Compare their intended behavior with the linked -webkit-mask-box-image demo, then determine whether the naming or specification needs clarification; done means reaching and recording a resolved direction for the open design question.

Written by the indexing model from the issue text.

Assessment

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