Guia completo sobre o uso de bordas em CSS para iniciantes

Bordas são um dos componentes mais importantes e versáteis na hora de se criar uma página web.

Podemos utilizar bordas para separar conteúdos ou apenas para chamar a atenção para alguma parte específica da página.

Se bem utilizado, as bordas tornam a vida dos usuários mais simples, chamando a atenção para os locais certos, auxiliando na realização de alguma tarefa ou acelerando o entendimento de algo.

Estilos de bordas em CSS(border-style)

A propriedade border-style especifica qual o tipo de borda será exibido.

As opções de estilo de borda são:

• none: Sem bordas.
• solid: Uma borda sólida, como uma linha.
• dashed: Uma borda tracejada.
• dotted: Uma borda pontilhada.
• double: Uma borda dupla
• groove: Uma borda 3d, como um “sulco”.
• ridge: Uma borda 3d, como um “cume”.
• inset: Uma borda 3d, que deixa o elemento com a aparência de estar embutido na borda.
• outset : Uma borda 3d, que deixa o elemento com a aparência de estar em um releve em relação à borda.
• hidden: Uma borda oculta.

Abaixo temos um exemplo de como se parece cada um dos tipos de bordas:

O código para isso é apenas:

<div style="border-style: solid">exemplo</div> <!--Para borda solid-->
<div style="border-style: dashed">exemplo</div> <!--Para borda dashed-->
<div style="border-style: dotted">exemplo</div> <!--Para borda dotted-->
<div style="border-style: double">exemplo</div> <!--Para borda double-->
<div style="border-style: groove">exemplo</div> <!--Para borda groove-->
<div style="border-style: ridge">exemplo</div> <!--Para borda ridge-->
<div style="border-style: inset">exemplo</div> <!--Para borda inset-->
<div style="border-style: outset">exemplo</div> <!--Para borda outset-->
<div style="border-style: hidden">exemplo</div> <!--Para borda hidden-->
<div style="border-style: none">exemplo</div> <!--Para borda none-->

Também é possível utilizar vários tipos de borda no mesmo elemento, por exemplo:

<div style="border-style: solid dashed">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Também podemos passar 4 valores, sendo um estilo para cada lado da borda, como no exemplo:

<div style="border-style: solid dashed dotted double">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Quando passamos 3 valores, o segundo valor irá ser aplicado a borda direita e esquerda:

<div style="border-style: dashed double dotted">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Largura da borda em CSS(border-width)

A propriedade border-width especifica qual a largura da borda.

Você pode definir a largura da borda com alguma palavra-chave ou com alguma unidade de medida reconhecida pelo CSS.

• Palavras-chaves: thin(fino), medium(médio) e thick(espesso).
• Unidade de medida: Um valor seguido de uma unidade de medida(px, pt, em, rem, vh, vw, etc).

Abaixo temos um exemplo de como se parece uma borda com diferentes border-width:

O código para isso está no exemplo abaixo:

<div style="border-style: solid; border-width: thick">exemplo</div> <!--Para palavras chaves-->
<div style="border-style: solid; border-width: 1px">exemplo</div> <!--Para unidades de medidas-->

Também é possível utilizar várias larguras de borda no mesmo elemento, por exemplo:

<div style="border-style: solid; border-width: thin thick">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Também podemos passar 4 valores, sendo uma largura para cada lado da borda, como no exemplo:

<div style="border-style: solid; border-width: thin thick 1px 10px">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Quando passamos 3 valores, o segundo valor irá ser aplicado a borda direita e esquerda:

<div style="border-style: solid; border-width: thin thick 10px">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Cor da borda em CSS(border-color)

A propriedade border-color especifica qual a cor da borda.

Você pode definir a cor da borda com um nome de um cor em inglês ou com um código de cor em hex, RGB, RGBA, HSL ou HSLA.

Abaixo temos um exemplo de como se parece uma borda com diferentes border-color:

O código para isso está no exemplo abaixo:

<div style="border-style: solid; border-color: red">exemplo</div> <!--Para nomes de cor-->
<div style="border-style: solid; border-color: #a01111">exemplo</div> <!--Para códigos de cor hex-->
<div style="border-style: solid; border-color: rgb(150,255,100)">exemplo</div> <!--Para códigos de cor rgb-->

Também é possível utilizar várias cores de borda no mesmo elemento, por exemplo:

<div style="border-style: solid; border-color: red blue">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Também podemos passar 4 valores, sendo uma cor para cada lado da borda, como no exemplo:

<div style="border-style: solid; border-color: red blue green yellow">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Quando passamos 3 valores, o segundo valor irá ser aplicado a borda direita e esquerda:

<div style="border-style: solid; border-color: red blue green">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Bordas arredondadas em CSS(border-radius)

A propriedade border-radius especifica um ângulo de arredondamento para a borda.

Você pode definir o raio da borda com alguma unidade(px, pt, em, rem, vh, vw, etc), quanto maior esse valor mais arredondado ficará a borda.

Abaixo temos um exemplo de como se parece uma borda com diferentes valores de border-radius:

O código para isso está no exemplo abaixo:

<div style="border-style: solid; border-radius: 10px">exemplo</div>

Também é possível utilizar vários valores de raio no mesmo elemento, por exemplo:

<div style="border-style: solid; border-radius: 5px 20px">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Também podemos passar 4 valores, sendo um raio para cada lado da borda, como no exemplo:

<div style="border-style: solid; border-radius: 5px 20px 10px 50px">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Quando passamos 3 valores, o segundo valor irá ser aplicado a borda direita e esquerda:

<div style="border-style: solid; border-radius: 20px 10px 50px">exemplo</div>

Esse código cria uma div parecida com a abaixo:

Conclusão

Bordas são muito úteis para tornar o conteúdo de uma página mais fácil de ser entendido pelo usuário.

Constatamos no artigo como é simples criar e editar o estilo de bordas, com pouquíssimo conhecimento de HTML e CSS já é possível tornar o conteúdo muito mais simples e agradável para o usuário consumir.