Expand description
Utilities for controlling the width of an element’s borders.
| Class | Properties |
|---|---|
| border-<integer> | border-width: <integer>px; |
| border | border-width: 1px; |
| border-x-<integer> | border-inline-width: <integer>px; |
| border-x | border-inline-width: 1px; |
| border-y-<integer> | border-block-width: <integer>px; |
| border-y | border-block-width: 1px; |
| border-s-<integer> | border-inline-start-width: <integer>px; |
| border-s | border-inline-start-width: 1px; |
| border-e-<integer> | border-inline-end-width: <integer>px; |
| border-e | border-inline-end-width: 1px; |
| border-t-<integer> | border-top-width: <integer>px; |
| border-t | border-top-width: 1px; |
| border-r-<integer> | border-right-width: <integer>px; |
| border-r | border-right-width: 1px; |
| border-b-<integer> | border-bottom-width: <integer>px; |
| border-b | border-bottom-width: 1px; |
| border-l-<integer> | border-left-width: <integer>px; |
| border-l | border-left-width: 1px; |
§Tailwind compatibility
Border width values don’t follow Tailwind’s philosophy of limiting possible values and all numbers are supported. They are however perfectly compatible with Tailwind’s values.
§Arbitrary values
Any <length> or line width property is allowed as arbitrary value.
For example, border-x-[1.2rem].