Shape
Shape provides distinction to individual components as well as establishes a sense of overall visual identity throughout the application.
Border radius
Border radius is used to set the rounded-ness of a container or shape. Consistent use of a container's border radius can be used to clarify intent such as whether or not a component is interactive.
0
![](/assets/img/visual-language/shape/shape-border-radius-0.png)
50
![](/assets/img/visual-language/shape/shape-border-radius-50.png)
100
![](/assets/img/visual-language/shape/shape-border-radius-100.png)
200
![](/assets/img/visual-language/shape/shape-border-radius-200.png)
300
![](/assets/img/visual-language/shape/shape-border-radius-300.png)
400
![](/assets/img/visual-language/shape/shape-border-radius-400.png)
Circle
![](/assets/img/visual-language/shape/shape-border-radius-circle.png)
Border width
Border width is used to define the edge of a frame or component. This can be used alone or in conjunction with background fills to create various levels of visual hierarchy within a series of containers.