Rounded corners
A.k.a. border radius
Most components come with the border radius already, making its applicability limited beyond background elements. 4 px is chosen because it’s noticeable without drawing attention to itself, and it can be used on various elements without things like inputs and labels falling apart. It also doesn’t lead to the need for multiple sizes when nesting things.
| Class | Declaration | Usage |
|---|---|---|
| radius-a | border-radius: 4px; |
Sets border radius of all corners to 4px. Standard for boxes that are not attached to other elements. |
|
radius-t radius-r radius-b radius-l |
border-radius: 4px;
|
Border radius for the sides. Made as subtractive which is also useful if two rounded elements are attached and should appear as a whole. |
|
radius-tl radius-tr radius-br radius-bl |
border-[corner]-radius: 4px; |
Border radius for individual corners. Same use cases as for the top and bottom classes. |
The radius is also available as the custom property
--radius
Examples
radius-a
radius-t
radius-b
radius-br
Subtractive
Using radius-l and radius-r to remove the rounded corners on some of the sides of an element with already rounded
corners. See custom dropdowns and disclosures