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. Theborder-(sm|md|lg|xl)shorthand is also supported.border-(sm|md|lg|xl)-0removes 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)-0the border from 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.
