Overview
These guidelines summarize how we use borders. Generally adding a border to an element helps give it a clearer structure and separation from other elements close it.
Our borders are also used to communicate state, direct attention and identify components.
Border Radius
Rounded corners on elements make information easier to process and more attractive to interact with.
Some experts say that rectangles with rounded corners are easier on the eyes than a rectangle with sharp edges because they take less cognitive effort to visually process.
| Token | Value | Description |
|---|---|---|
| rounded-none | 0px | For elements without rounded borders. |
| rounded-xs | 3px | Used on subtle and very small components. |
| rounded-sm | 6px | Used on small components. |
| rounded-md | 12px | Our standard border radius size. Used for medium sized elements, like multiple cards in a row. |
| rounded-lg | 20px | Used for very large elements. |
| rounded-full | 9999px | Used to create fully rounded corners or a circle, often used for components that should reflect a pill form and as the background to an icon or other graphic. |
Usage
DoUse and apply only a radius that is listed and part of the system.
Don’tChange the size of the radius to any undocumented value.
DoUse a border radius appropriate for the size of the element. Smaller size = smaller radius option
Don’tChoose a too small radius for the element, that makes the elements corners too straight or pointy. Our interface should be rounded and friendly.
Border Width
In most cases a very thin border will be the right choice for our brand.
| Token | Value | Description |
|---|---|---|
| border-none | 0px | Sets the border width to 0 which removes the border visibility. |
| border-md | 1px | Our default border width. |
| border-lg | 2px | For strong border emphasize in rare cases or focus states |
| border-xl | 3px | Mostly used for highlighting an element with a really strong border. |
Usage
DoUse and apply only stroke widths that are listed and part of the system.
Don’tIncrease the size of the stroke to any undocumented value.
DoUse strokes and borders sparingly and only where they make sense, to create a clear seperation between element.
Don’tMake your design too boxy by overusing borders