Re: [csswg-drafts] [css-borders] allow multiple borders (#13044)

Another solution to all this would be custom, named border styles, specified within a new global `@border-style` at-rule, which optionally supported multiple colors. All existing border styles should be describable by its descriptors. 

It would need to describe a repeating pattern of basic shapes used to either fill the available empty border space or mask the adjustable 1D image fill. The following code mockup uses the former concept. 

~~~~ css
@border-style solid {
  thickness: 100% /* of border-width */;
  fill: border-color(1);
}
@border-style dotted {
  thickness: 102% /* overshoot a bit */;
  fill: circle(100%, border-color(1)) space(auto);
}

@border-style --double-striped {
  fill: stripe(50% border-color(1), 50% border-color(2));
  orientation: outwards; /* stripes stacked from inner to outer-most */
}
@border-style --you-ass-ey {
  fill: star(5/* spokes */, 100%, border-color(1, blue)) space(auto)
        star(5, 100%, border-color(2, white)) space(auto)
        star(5, 100%, border-color(3, red)) space(auto);
  orientation: block; /* the pentagram stars point upwards ⭐️ on all four side, unless block progression is horizontal */
}
~~~~

The `border-style` property would then accept a dashed ident as its value.

~~~~ css
foo {
  border-style: --double-striped;
  border-color: red, white, /* unused:*/ blue;
  border-width: 3px;
}
foo>bar {
  border: inherit;
  border-style: --you-ass-ey; /* inverse color sequence red-white-blue from default blue-white-red */
}
~~~~


-- 
GitHub Notification of comment by Crissov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13044#issuecomment-3686993217 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 23 December 2025 15:16:15 UTC