Borders

Utilities for borders, and border radius.

Default border

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

<div class="border">
  .border
</div>

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

<div class="d-flex mb-3">
  <div class="border-left col-3">
    .border-left
  </div>
  <div class="border-top col-3">
    .border-top
  </div>
  <div class="border-bottom col-3">
    .border-bottom
  </div>
  <div class="border-right col-3">
    .border-right
  </div>
</div>
<div class="border-x">
  .border-x
</div>
<div class="border-y">
  .border-y
</div>

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

<div class="Box border-top-0">
  .border-top-0
</div>

Border style

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

<div class="border border-dashed p-2">
  .border-dashed
</div>

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.

<div class="border rounded-0 p-2 mb-2">
  .rounded-0
</div>
<div class="border rounded-1 p-2 mb-2">
  .rounded-1
</div>
<div class="border rounded-2 p-2 mb-2">
  .rounded-2
</div>
<div class="border rounded-3 p-2 mb-2">
  .rounded-3
</div>
<div class="border circle p-3" style="width: 100px; height: 100px;">
  .circle
</div>

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

<div class="border rounded-top-2 p-2 mb-2">
  .rounded-top-2
</div>
<div class="border rounded-right-2 p-2 mb-2">
  .rounded-right-2
</div>
<div class="border rounded-bottom-2 p-2 mb-2">
  .rounded-bottom-2
</div>
<div class="border rounded-left-2 p-2 mb-2">
  .rounded-left-2
</div>

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.

<div class="border-top border-sm-right border-md-bottom border-md-top-0">
  .border-top
  <span class="d-none d-sm-inline">.border-sm-right </span>
  <span class="d-none d-md-inline">.border-md-bottom </span>
  <span class="d-none d-lg-inline">.border-md-top-0 </span>
</div>

Border colors

Border colors are documented on the colors utilities page.