Add `border-image` scrim style

[argyleink]

figure {
  border-image: fill 0 linear-gradient(#0003, #000);
}

https://codepen.io/t_afif/pen/vYbdVjb

[argyleink]

there's more!

https://www.smashingmagazine.com/2024/01/css-border-image-property/

[Brian-Pob]

This seems interesting and I would love to take a crack at making some of these. Though I would appreciate some guidance on where to start off 😄 What kind of variations did you have in mind? Different patterns, colors, opacities, etc?

[argyleink]

A good place to start is to make a Codepen that captures as many border-image one-liners as it can. There's some good precedence and background onto adding a set of props over here where we discussed masks.

workflow goes something like this:

1. aggregate one-liner props into a central place and give them meaningful names
2. when applicable, offer 1-3 variants
3. iterate to find the right set
4. add them to the src/ directory
5. document them in the docsite
6. add a build script entry
7. add them to the exports in package.json

Step 1 is the fun part, same with step 2. If you want to start there I can certainly guide you through the rest 🙂