Border

The border system for controlling border width, style, and radius properties.

Border Width

Utilities for controlling the width of an element's borders.
Class
Name
Properties
Example
border
Border default (1px)
border-width: 1px;
border-0
0px border
border-width: 0px;
border-1
1px border
border-width: 1px;
border-2
2px border
border-width: 2px;
border-4
4px border
border-width: 0.25rem; /* 4px */
border-8
8px border
border-width: 0.5rem; /* 8px */
border-12
12px border
border-width: 0.75rem; /* 12px */
border-16
16px border
border-width: 1rem; /* 16px */
border-x
Border-x default (1px)
border-left-width: 1px;
border-right-width: 1px;
border-x-0
0px border-x
border-left-width: 0px;
border-right-width: 0px;
border-x-1
1px border-x
border-left-width: 1px;
border-right-width: 1px;
border-x-2
2px border-x
border-left-width: 2px;
border-right-width: 2px;
border-x-4
4px border-x
border-left-width: 0.25rem; /* 4px */
border-right-width: 0.25rem; /* 4px */
border-x-8
8px border-x
border-left-width: 0.5rem; /* 8px */
border-right-width: 0.5rem; /* 8px */
border-x-12
12px border-x
border-left-width: 0.75rem; /* 12px */
border-right-width: 0.75rem; /* 12px */
border-x-16
16px border-x
border-left-width: 1rem; /* 16px */
border-right-width: 1rem; /* 16px */
border-y
Border-y default (1px)
border-top-width: 1px;
border-bottom-width: 1px;
border-y-0
0px border-y
border-top-width: 0px;
border-bottom-width: 0px;
border-y-1
1px border-y
border-top-width: 1px;
border-bottom-width: 1px;
border-y-2
2px border-y
border-top-width: 2px;
border-bottom-width: 2px;
border-y-4
4px border-y
border-top-width: 0.25rem; /* 4px */
border-bottom-width: 0.25rem; /* 4px */
border-y-8
8px border-y
border-top-width: 0.5rem; /* 8px */
border-bottom-width: 0.5rem; /* 8px */
border-y-12
12px border-y
border-top-width: 0.75rem; /* 12px */
border-bottom-width: 0.75rem; /* 12px */
border-y-16
16px border-y
border-top-width: 1rem; /* 16px */
border-bottom-width: 1rem; /* 16px */
border-t
Border top default (1px)
border-top-width: 1px;
border-t-0
0px border-top
border-top-width: 0px;
border-t-1
1px border-top
border-top-width: 1px;
border-t-2
2px border-top
border-top-width: 2px;
border-t-4
4px border-top
border-top-width: 0.25rem; /* 4px */
border-t-8
8px border-top
border-top-width: 0.5rem; /* 8px */
border-t-12
12px border-top
border-top-width: 0.75rem; /* 12px */
border-t-16
16px border-top
border-top-width: 1rem; /* 16px */
border-r
Border right default (1px)
border-right-width: 1px;
border-r-0
0px border-right
border-right-width: 0px;
border-r-1
1px border-right
border-right-width: 1px;
border-r-2
2px border-right
border-right-width: 2px;
border-r-4
4px border-right
border-right-width: 0.25rem; /* 4px */
border-r-8
8px border-right
border-right-width: 0.5rem; /* 8px */
border-r-12
12px border-right
border-right-width: 0.75rem; /* 12px */
border-r-16
16px border-right
border-right-width: 1rem; /* 16px */
border-b
Border bottom default (1px)
border-bottom-width: 1px;
border-b-0
0px border-bottom
border-bottom-width: 0px;
border-b-1
1px border-bottom
border-bottom-width: 1px;
border-b-2
2px border-bottom
border-bottom-width: 2px;
border-b-4
4px border-bottom
border-bottom-width: 0.25rem; /* 4px */
border-b-8
8px border-bottom
border-bottom-width: 0.5rem; /* 8px */
border-b-12
12px border-bottom
border-bottom-width: 0.75rem; /* 12px */
border-b-16
16px border-bottom
border-bottom-width: 1rem; /* 16px */
border-l
Border left default (1px)
border-left-width: 1px;
border-l-0
0px border-left
border-left-width: 0px;
border-l-1
1px border-left
border-left-width: 1px;
border-l-2
2px border-left
border-left-width: 2px;
border-l-4
4px border-left
border-left-width: 0.25rem; /* 4px */
border-l-8
8px border-left
border-left-width: 0.5rem; /* 8px */
border-l-12
12px border-left
border-left-width: 0.75rem; /* 12px */
border-l-16
16px border-left
border-left-width: 1rem; /* 16px */

Border Style

Utilities for controlling the style of an element's borders.
Class
Name
Properties
Example
border-solid
Solid border-style
border-style: solid;
border-dashed
Dashed border-style
border-style: dashed;
border-dotted
Dotted border-style
border-style: dotted;
border-none
No border-style
border-style: none;

Border Radius

Utilities for controlling the border radius of an element.
Class
Name
Properties
Example
radius-none
No border radius
border-radius: 0;
radius-1
1px border radius
border-radius: 1px;
radius-2
2px border radius
border-radius: 2px;
radius-4
4px border radius
border-radius: 0.25rem; /* 4px */
radius-8
8px border radius
border-radius: 0.5rem; /* 8px */
radius-12
12px border radius
border-radius: 0.75rem; /* 12px */
radius-16
16px border radius
border-radius: 1rem; /* 16px */
radius-pill
Pill border radius
border-radius: 99rem; /* 1584px (Full) */