Names what is drawn at the edge of a box: the line enclosing it, the corner rounding it, the outline marking it
focused and the one marking it invalid, together with the weight a vector glyph is stroked at.
Remarks
Radii — borderRadius025 to borderRadius100 round a corner by a length, on the steps
the spacing ladder carries and stated the same way, in em, so a box rounds by the same amount
whatever size it is given and a subtree given a size of its own rounds to match. A shape rather than a corner, a
roundel or a pill, is a share of its box rather than a step on this ladder, and the component drawing it says so.
Rounding — borderRadius is not a step but the rounding of the element it is assigned to, set from a step: no
rule reads it, and assigning it through css rounds that element alone.
Marks — outlineFocus and outlineInvalid are whole outline shorthand values rather than colours, so a rule
states the mark in one declaration and an app retuning the anchors carries it along. outline-offset is not part of
that shorthand, so a rule setting either mark states the offset alongside it, and a mark left at the offset the
platform gives the control will not sit where the rule expects. They pair with the colorFocus and
colorFail roles, which a consumer reaches for where it paints the mark itself.
Strokes — strokeWidth is a bare number in viewport user units, so a glyph keeps its weight at any size.
Border tokens.
Names what is drawn at the edge of a box: the line enclosing it, the corner rounding it, the outline marking it focused and the one marking it invalid, together with the weight a vector glyph is stroked at.
Remarks
Radii —
borderRadius025toborderRadius100round a corner by a length, on the steps the spacing ladder carries and stated the same way, inem, so a box rounds by the same amount whatever size it is given and a subtree given a size of its own rounds to match. A shape rather than a corner, a roundel or a pill, is a share of its box rather than a step on this ladder, and the component drawing it says so.Rounding —
borderRadiusis not a step but the rounding of the element it is assigned to, set from a step: no rule reads it, and assigning it through css rounds that element alone.Marks —
outlineFocusandoutlineInvalidare wholeoutlineshorthand values rather than colours, so a rule states the mark in one declaration and an app retuning the anchors carries it along.outline-offsetis not part of that shorthand, so a rule setting either mark states the offset alongside it, and a mark left at the offset the platform gives the control will not sit where the rule expects. They pair with thecolorFocusandcolorFailroles, which a consumer reaches for where it paints the mark itself.Strokes —
strokeWidthis a bare number in viewport user units, so a glyph keeps its weight at any size.