Border type feedback

[c1rrus]

Is the border composite type fit for purpose? Does it need more sub-values to account for features like outset, border images, multiple borders, etc. that some platforms an design tools have?

Please share your feedback, thoughts and ideas in this issue.

[tlouisse]

Hi, what would be the recommended way to store border-radius?

[gossi]

The more I use that, the more I think, "border" is the wrong word, instead "stroke" is more appropriate:

• A ruler (<hr>) is a stroke
• A border is a set of strokes (with position/alignment)

Or: A stroke can be a border, but a border cannot be a stroke.

And to add what @tlouisse said: A ruler (= a line) cannot have a radius.

---

So, there is:

• stroke style: as already defined
• stroke: style + color + width
• border: stroke (+ location) ¹
• border-radius: targeting the border joints (in design tools, there is also joint variants)

¹ When location is omitted, border is applied on all sides, then border equals stroke

[d01000100]

I don't know if this is the correct place to bring this up, but I've seen in a handful of designs (mostly documented in Figma) that some elements use "inside" or "outside" aligned borders, for example to create a focus "border" around a button.

I do know that it most technologies, this effect does not fall into the border property (For example in CSS you would set box-sizing: border-box) and some other technologies may not support it at all.

Is this "alignment" of the border being considered in any place on the standard?

[PavelLaptev]

@gossi +1

[CITguy]

Would a CSS outline be an offset border token, its own token type, or something else entirely?

The two share similar properties:

• border-color & outline-color (color)
• border-width & outline-width (dimension)
• border-style & outline-style (strokeStyle)

It's also worth noting that not every platform has a concept of an "outline". At its core it's just a border on a slightly larger, transparent fill box.