Borders
Utilities for borders, and border radius.
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.
Use border-dashed to give an element a dashed border.
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 are documented on the colors utilities page.
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:
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.