Border
Reference to the styles that can be applied to the borders of any UI element.
Border Radius
The Border Radius offers combination of 4 different options, from none (0 px) to a full circle (100%). They are used to round the corners of an element's outer edges.
Border Radius Classes and Variables
0
.border-radius-none
--border-radius-none
4px
.border-radius-soft
--border-radius-soft
100px
.border-radius-rounded
--border-radius-rounded
100%
.border-radius-circle
--border-radius-circle
Border Sizes
The Border Size is applied to all corners of an element. There are 4 sizes available to use — None (0 px), S (1 px), M (2 px) and L (3px).
Border Sizes Classes and Variables
0
.border-size-none
--border-size-none
1px
.border-size-s
--border-size-s
2px
.border-size-m
--border-size-m
3px
.border-size-l
--border-size-l