Borders

Use border utilities to add or remove an element's borders, change color, width, and radius.

Additive

Add borders to elements.

<span class="border p-3 d-inline-block me-2 mb-2">all</span>
<span class="border-top p-3 d-inline-block me-2 mb-2">top</span>
<span class="border-end p-3 d-inline-block me-2 mb-2">end</span>
<span class="border-bottom p-3 d-inline-block me-2 mb-2">bottom</span>
<span class="border-start p-3 d-inline-block me-2 mb-2">start</span>

Subtractive

Remove borders from elements.

<span class="border border-0 p-3 d-inline-block me-2 mb-2">none</span>
<span class="border border-top-0 p-3 d-inline-block me-2 mb-2">no top</span>
<span class="border border-end-0 p-3 d-inline-block me-2 mb-2">no end</span>
<span class="border border-bottom-0 p-3 d-inline-block me-2 mb-2">no bottom</span>
<span class="border border-start-0 p-3 d-inline-block me-2 mb-2">no start</span>

Color

Change the border color using semantic color utilities.

<span class="border border-primary p-3 d-inline-block me-2 mb-2">primary</span>
<span class="border border-secondary p-3 d-inline-block me-2 mb-2">secondary</span>
<span class="border border-success p-3 d-inline-block me-2 mb-2">success</span>
<span class="border border-info p-3 d-inline-block me-2 mb-2">info</span>
<span class="border border-warning p-3 d-inline-block me-2 mb-2">warning</span>
<span class="border border-danger p-3 d-inline-block me-2 mb-2">danger</span>
<span class="border border-contrast p-3 d-inline-block me-2 mb-2">contrast</span>

Subtle Colors

<span class="border border-primary-subtle p-3 d-inline-block me-2 mb-2">primary subtle</span>
<span class="border border-secondary-subtle p-3 d-inline-block me-2 mb-2">secondary subtle</span>
<span class="border border-success-subtle p-3 d-inline-block me-2 mb-2">success subtle</span>
<span class="border border-info-subtle p-3 d-inline-block me-2 mb-2">info subtle</span>
<span class="border border-warning-subtle p-3 d-inline-block me-2 mb-2">warning subtle</span>
<span class="border border-danger-subtle p-3 d-inline-block me-2 mb-2">danger subtle</span>

Width

<span class="border border-1 p-3 d-inline-block me-2 mb-2">1</span>
<span class="border border-2 p-3 d-inline-block me-2 mb-2">2</span>
<span class="border border-3 p-3 d-inline-block me-2 mb-2">3</span>
<span class="border border-4 p-3 d-inline-block me-2 mb-2">4</span>
<span class="border border-5 p-3 d-inline-block me-2 mb-2">5</span>

Opacity

Control border opacity with .border-opacity-* utilities.

<div class="border border-success p-2 mb-2">Default success border</div>
<div class="border border-success border-opacity-75 p-2 mb-2">75% opacity success border</div>
<div class="border border-success border-opacity-50 p-2 mb-2">50% opacity success border</div>
<div class="border border-success border-opacity-25 p-2 mb-2">25% opacity success border</div>
<div class="border border-success border-opacity-10 p-2">10% opacity success border</div>

Border Radius

Add rounded corners to elements.

<span class="border rounded p-3 d-inline-block me-2 mb-2">rounded</span>
<span class="border rounded-top p-3 d-inline-block me-2 mb-2">top</span>
<span class="border rounded-end p-3 d-inline-block me-2 mb-2">end</span>
<span class="border rounded-bottom p-3 d-inline-block me-2 mb-2">bottom</span>
<span class="border rounded-start p-3 d-inline-block me-2 mb-2">start</span>

Radius Sizes

Scale the border radius with size modifiers from 0 to 5, plus circle and pill.

<span class="border rounded-0 p-3 d-inline-block me-2 mb-2">0</span>
<span class="border rounded-1 p-3 d-inline-block me-2 mb-2">1</span>
<span class="border rounded-2 p-3 d-inline-block me-2 mb-2">2</span>
<span class="border rounded-3 p-3 d-inline-block me-2 mb-2">3</span>
<span class="border rounded-4 p-3 d-inline-block me-2 mb-2">4</span>
<span class="border rounded-5 p-3 d-inline-block me-2 mb-2">5</span>
<span class="border rounded-circle p-3 d-inline-block me-2 mb-2">circle</span>
<span class="border rounded-pill px-4 py-3 d-inline-block me-2 mb-2">pill</span>

Practical Examples

Form Input with Border Color

<input type="email" class="border-success" placeholder="Valid email" aria-invalid="false" />
<div class="p-3 bg-info-subtle border border-info rounded">
  Informational message with matching border color.
</div>