Border

Utilities for border and outline properties.

Border Radius

Using rounded-[*], you can control the border radius of an element.

rounded-

Sides

Using rounded-[side]-[*], you can round only one side of an element.

rounded-

Corners

Using rounded-[side]-[corner]-[*], you can round only one corner of an element.

rounded-
Other than pre-defined values like xl,md,... you can use numerical values which will be converted into a multiple of 0.125rem (can be changed in config → units) for consistent and precise rounding.

For example, "rounded-5" will give you a border radius of 0.625rem.
→
You can use Arbitrary values like "rounded-(34px)" as well.
Learn more about Arbitrary Styling

Border Width

Using border-[*], you can control the width of an element's borders.

border-

Sides

Using border-[side]-[*], you can set the border width for one side of an element.

border-
→
You can use Arbitrary values like "border-(0.25em)" or "border-top-(0.625rem)" as well.
Learn more about Arbitrary Styling

Border Style

Using border-s-[*], you can control the style of an element's borders.

border-s-

Sides

Using border-[side]-s-[*], you can set the border style for one side of an element.

border-

Outline Width

Using outline-[*], you can control the width of an element's outline.

outline-

Outline Style

Using outline-s-[*], you can control the style of an element's borders.

outline-s-

Outline Offset

Using outline-o-[*], you can control the offset of an element's outline.

outline-o-