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

Control border width with .border-* utilities, ranging from 0 (no border) to 5 (thickest).

<span class="border border-0 p-3 d-inline-block me-2 mb-2">0</span>
<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-4">4</span>
<span class="border border-5 p-3 d-inline-block me-2 mb-2">5</span>

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 d (default), circle and pill.

<span class="border rounded-0 p-3 d-inline-block me-2 mb-2">0</span>
<span class="border rounded-d p-3 d-inline-block me-2 mb-2">d</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 border-primary" placeholder="Text input" />
<div class="p-d border border-primary rounded">
  Informational message with matching border color.
</div>