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.

None

Soft

Rounded

Circle

Border Radius Classes and Variables

Border Radius

Size

Class

CSS Variable

None

CSS Val

.border-radius-none

--border-radius-none

Soft

CSS Val

.border-radius-soft

--border-radius-soft

Rounded

CSS Val

.border-radius-rounded

--border-radius-rounded

Circle

CSS Val

.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).

None

Border Sizes Classes and Variables

Border Sizes

Size

Class

CSS Variable

None

CSS Val

.border-size-none

--border-size-none

CSS Val

.border-size-s

--border-size-s

CSS Val

.border-size-m

--border-size-m

CSS Val

.border-size-l

--border-size-l