𝜏:torquens

Appearance

Shape Tokens ​

The shape of most rectangles, once the size has been established, is defined by the border radius:

Border width↓↑
↑Block padding↓
←Inline paddingβ†’
Leading
←Gapβ†’
Central
←Gapβ†’
Trailing
β†₯Line height
Border radius↢

We'll consider three common patterns here:

Sharp
Pill
Round

Shapes ​

Sharp ​

Sharp shapes are by far the easiest to defineβ€”the border radius is 0.

Pill ​

A pill shape is where each end of a container forms a perfect semicircle.

This is often implemented using an artificially high border radius (100vh is a favourite), and relying on the CSS specification's requirement that corner curves do not overlap.

However, this will fail if you have content that wraps:

One Line
Many
Lines
(Incorrect)
Many
Lines
(Correct)

The correct calculation for pill border radius is in fact:

css
.pill {
  padding-block: var(--padding);
  border-radius: calc(0.5lh + var(--padding));
}

That is, half the line height plus the block padding. This ensures that the border radius is exactly correct for a single line, and will remain consistent even as the number of lines increases.

Round ​

Rounded corners can be almost anything you want them to be, but as with pill should probably be linked to the padding.

The simplest form is the concentric:

css
.concentric {
  padding-block: var(--padding);
  border-radius: var(--padding);
}

Though any transform is possible:

css
/* Fixed 4px offset with a minimum radius of 4px */
.fixed-offset {
  padding-block: var(--padding);
  border-radius: max(calc(var(--padding) - 4px), 4px);
}

/* Border radius based on a global theme sharpness variable */
.proportional {
  padding-block: var(--padding);
  border-radius: calc(var(--padding) * var(--sharpness));
}

Variables ​

Encoding this into a simple form may at first appear quite difficult. However, it's possible to unify all five options above under a single computation:

css
.container {
  border-radius: max(
    calc(
      var(--border-radius-fixed) +
        (var(--border-radius-sharpness) * var(--padding))
    ),
    var(--border-radius-minimum)
  );
}

Using the following variables:

Container Shapes
Name
Sharp
Pill
Concentric
Fixed
Proportional
Shape
Border Radius
Fixed
0
0.5lh
0
-4px
0
Sharpness
0
1
1
1
0.75
Minimum
0
0
0
4px
0

Note that again, these are based off padding, which itself is based off typography, which is based off the browser root font size.

As before, this is delightfully simple to do in CSS, and near impossible in design tooling.