Study · CSS · Components
Shapes and CSS functions
Give a repeated calculation a name, then let borders follow a path.
A component can need an unusual outline and a consistent spacing rule. CSS can describe both as reusable design primitives instead of separate bits of markup.
Name a calculation once
A CSS custom function can turn a small input into a reusable value. Adjust the spacing unit: each gap is computed by the same function, so one rule controls the rhythm.
One custom function supplies each gap.
Draw a border around a path
border-shape lets a border, background and shadow follow a basic shape. Resize this exhibition ticket and deepen its side cutouts: the outline follows both inward curves. The ticket still occupies an ordinary rectangular layout box.
the frame
One path can govern the border and its shadow, while one named calculation can keep repeated spacing in step.