Utilities for borders, border radius, and box shadows.
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
Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
border-black-fade to add an rgba black border with an alpha transparency of
0.15. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette:
On dark backgrounds use
border-white-fade instead. It adds an rgba white border with an alpha transparency of
.border-white-fade-xx to add a white border with various levels of alpha transparency.
border-dashed to give an element a dashed border.
Use the following utilities to add or remove rounded corners:
rounded-0 removes rounded corners,
rounded-1 applies a border radius of 3px,
rounded-2 applies a border radius of 6px.
.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 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)-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.