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.

Exemplo de borda lateral direita arredondada

Exemplo de borda lateral esquerda arredondada

Exemplo de imagem não arredondada (sobrescreve qualquer arredondamento presente)

<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">