Borders

Utilities for borders, border radius, and box shadows.

Table of Contents

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 colors

Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.

Borders with alpha transparency

Use 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: rgba(27,31,35, 0.15).

On dark backgrounds use border-white-fade instead. It adds an rgba white border with an alpha transparency of 0.15.

Use .border-white-fade-xx to add a white border with various levels of alpha transparency.

Border style

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

Rounded corners

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:

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.

Border color utilities

ClassVariableValue
.border-blue$border-blue#0366d6
.border-blue-light$border-blue-light#c8e1ff
.border-gray$border-gray#e1e4e8
.border-gray-dark$border-gray-dark#d1d5da
.border-gray-darker$border-gray-darker#444d56
.border-green$border-green#34d058
.border-purple$border-purple#6f42c1
.border-red$border-red#d73a49
Edit this page on GitHub
1 contributorcolebemis
Last edited by colebemis on August 12, 2019