Fronteiras

Use utilitários de borda para estilizar rapidamente a borda e o raio da borda de um elemento. Ótimo para imagens, botões ou qualquer outro elemento.

Fronteira

Use utilitários de borda para adicionar ou remover as bordas de um elemento. Escolha entre todas as bordas ou uma de cada vez.

Aditivo

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

Subtrativo

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

Cor da borda

Altere a cor da borda usando utilitários criados em nossas cores de tema.

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Raio da borda

Adicione classes a um elemento para arredondar facilmente seus cantos.

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-right" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-left" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
<img src="..." class="rounded-0" alt="...">

Tamanhos

Use .rounded-lgou .rounded-smpara raio de borda maior ou menor.

<img src="..." class="rounded-sm" alt="...">
<img src="..." class="rounded-lg" alt="...">