Skip to content

Borders

Utilities for borders, and border radius.

Default border

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

View in Storybook

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

View in Storybook

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

View in Storybook

Border style

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

View in Storybook

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 removes borders from 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 the border from the given side at and above the breakpoint.
View in Storybook

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.

View in Storybook

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

View in Storybook

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.
View in Storybook