Bordas

Use os 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.

Borda

Use os utilitários de borda para adicionar ou remover as bordas de um elemento. Escolha entre um dos lados ou todos de uma vez.

Adicione

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

Remova

<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 a partir das 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.

Example rounded image Example top rounded image Example right rounded image Example bottom rounded image Example left rounded image Completely round image Example non-rounded image (overrides rounding applied elsewhere)
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-0">