Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Additive borders

.border .border-top .border-end .border-bottom .border-start

<span class="border d-inline-block p-4 rounded">.border</span>
<span class="border-top d-inline-block p-4 rounded">.border-top</span>
<span class="border-end d-inline-block p-4 rounded">.border-end</span>
<span class="border-bottom d-inline-block p-4 rounded">.border-bottom</span>
<span class="border-start d-inline-block p-4 rounded">.border-start</span>

Subtractive borders

.border-0 .border-top-0 .border-end-0 .border-bottom-0 .border-start-0

<span class="border border-0 d-inline-block p-4">.border-0</span>
<span class="border border-top-0 d-inline-block p-4">.border-top-0</span>
<span class="border border-end-0 d-inline-block p-4">.border-end-0</span>
<span class="border border-bottom-0 d-inline-block p-4">.border-bottom-0</span>
<span class="border border-start-0 d-inline-block p-4">.border-start-0</span>

Border color

.border-primary .border-success .border-danger .border-warning .border-dark

<span class="border border-primary d-inline-block p-4 rounded">.border-primary</span>
<span class="border border-success d-inline-block p-4 rounded">.border-success</span>
<span class="border border-danger d-inline-block p-4 rounded">.border-danger</span>
<span class="border border-warning d-inline-block p-4 rounded">.border-warning</span>
<span class="border border-dark d-inline-block p-4 rounded">.border-dark</span>

Border width

.border-1 .border-2 .border-3 .border-4 .border-5

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

Border radius

.rounded .rounded-1 .rounded-2 .rounded-3 .rounded-4 .rounded-5 .rounded-pill

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

Rounded corners can also be scoped per side: .rounded-top, .rounded-end, .rounded-bottom, .rounded-start, plus the multi-corner .rounded-top-start etc.