Borders

Default border

The default border utility applies a solid, 1px border, with a default gray color.

Borders can be applied to a specific edge or to the X and Y axes individually:

Remove borders from all sides or a single side with .border-0, .border-top-0, .border-right-0, .border-bottom-0, .border-left-0.

Border style

Use border-dashed to give an element a dashed border.

Responsive borders

You can adjust border widths on all sides or each side individually with responsive border utilities:

• border-(sm|md|lg|xl) adds borders on all sides at and above the breakpoint. The border-(sm|md|lg|xl) shorthand is also supported.
• border-(sm|md|lg|xl)-0 sets borders to 0 on all sides at and above the breakpoint.
• border-(sm|md|lg|xl)-(top|right|bottom|left) adds a border on the given side at and above the breakpoint.
• border-(sm|md|lg|xl)-(top|right|bottom|left)-0 sets the border to 0 on the given side at and above the breakpoint.

Border colors

Border colors are documented on the colors utilities page.

Rounded corners

Use the following utilities to add or remove rounded corners: rounded-0 removes rounded corners, rounded-1 applies a border radius of 4px, rounded-2 applies a border radius of 6px, and rounded-3 applies a border radius of 8px. .circle applies a border radius of 50%, which turns square elements into perfect circles.

You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:

Responsive rounded corners

You can adjust border radius on all sides or each side individually with responsive border radius utilities:

• rounded-(sm|md|lg|xl) adds a 6px rounded corner on all sides at and above the breakpoint.
• rounded-(sm|md|lg|xl)-(0|1|2|3|4) adds a rounded corner on all sides at and above the breakpoint.
• rounded-(sm|md|lg|xl)-(top|right|bottom|left)-(0|1|2|3|4) adds a rounded corner on the given side at and above the breakpoint.