Bordas - Tutorial de CSS sobre a propriedade border

Neste tutorial de CSS, vamos aprender sobre um dos elementos mais importantes do Box Model, que são as bordas, através do estudo da propriedade border do CSS.

Vamos aprender como adicionar bordas acima de um elemento (border-top), na direita (border-right), abaixo (border-bottom) e na esquerda (border-left), além de aprender como alterar o tipo de borda (border-style: dotted, dashed, solid, double e none), espessura (border-width) e cor (border-color).

• Baixar PDF: Apostila HTML + CSS Progressivo

Como adicionar as bordas em CSS - A propriedade border

Sem dúvidas, o elemento do modelo das caixas mais fácil de ser percebido, são as bordas.
As bordas são elementos que servem para separar o padding da propriedade margin (veja essa imagem do Box Model).

As bordas são usadas para marcar, delimitar e separar uma região no layout de seu site.
Graças a flexibilidade do CSS, podemos definir onde nossa borda irá existir, se nos quatro lados (acima, abaixo e nas laterais), somente em um lado ou em uma combinação qualquer que desejarmos.

Para adicionarmos uma borda acima de qualquer elemento, usamos a propriedade:

border-top

Já para adicionar a borda na lateral direita, fazemos:

border-right

Abaixo:

border-bottom

E, por fim, na lateral esquerda de um elemento:

border-left

Por exemplo,para que todos os parágrafos tenham uma borda sólida, em todos os lados, fazemos:

p{
 border: solid;
}

Veja o efeito nos parágrafos, do código CSS acima:

Este parágrafo possui borda sólida em todos os lados

Tipos e Estilos de border em CSS - A propridade border-style

No exemplo anterior, mostramos como é a criação de uma borda e usamos o valor solid na propriedade border, que serve para definir uma borda sólida.

Porém, o CSS nos permite estilizar essa borda de várias maneiras, através da propriedade border-style.
Dentro os possíveis valores, vamos destacar os principais, que são:

• border-style: solid - Aplica o efeito de uma borda sólida
• border-style: double - Ao invés de uma linha, aplica um estilo CSS de duas linhas mais finas como borda
• border-style: dotted - Aplica o efeito de uma borda pontilhada (dot é ponto, em inglês)
• border-style: dashed - Aplica o efeito de tracejado
• border-style: none - Não aplica efeitos de borda

Veja o seguinte código CSS & HTML que mostra todos os efeitos acima, aplicados em parágrafos:

<p style="border: solid;">Esta borda possui o estilo solid</p>
<p style="border: double;">Esta borda possui o estilo double</p>
<p style="border: dotted;">Esta borda possui o estilo dotted</p>
<p style="border: dashed;">Esta borda possui o estilo dashed</p>
<p style="border: none;">Esta borda não é visível</p>

Agora veja o resultado:

Esta borda possui o estilo solid

Esta borda possui o estilo double

Esta borda possui o estilo dotted

Esta borda possui o estilo dashed

Esta borda não é visível

Existem ainda as borders do tipo groove, ridge, inset, outset, none, e hidden na propriedade border-style do CSS.

Espessura da Borda em CSS - A Propriedade border-width

Além de podermos definir que bordas irão aparecer e seu estilo, o CSS também nos permite escolher a espessura (grossura ou largura) da borda, e de mais de uma maneira, através da propriedade border-width.

A maneira mais precisa de definir a espessura da border, através da propriedade border-width é usando as unidades de medida, como o pixel (px), pt ou em.

Por exemplo, o código HTML e CSS de três parágrafos, com bordas de espessura 1 pixel, 2 pixels e 3 pixels é:

<p style="border-width: 1px;">Borda de 1 pixel</p>
<p style="border-width: 2px;">Borda de 2 pixel</p>
<p style="border-width: 3px;">Borda de 3 pixel</p>

Veja como fica:

Podemos usar algumas palavras, keywords especiais que definem a espessura de uma borda em CSS:
border-width: thick - Borda mais espessa (thick é grosso, espesso em inglês)
border-width: medium - Borda de espessura média
border-width: thin - thin significa fino, ou seja, define uma borda fina

Exemplo de código HTML e CSS:

<p style="border-width: thick">Borda thick</p>
<p style="border-width: medium">Borda medium</p>
<p style="border-width: thin">Borda thin</p>

Crie um documento HTML e teste os efeitos!

Cores nas Bordas em CSS - A Propriedade border-color

E, por fim, o CSS ainda nos permite definir a cor da borda, através da propriedade border-color, que pode receber o código de cores tanto através do nome, do sistema RGB ou por valores hexadecimais.

Veja nosso tutorial sobre Cores em Fontes no CSS, é a mesma ideia e lógica.

Vejamos um exemplo de código CSS e HTML usando a propriedade border-color :

<p style="border-color: red">Borda na cor vermelha</p>
<p style="border-color: rgb(0,255,0)">Borda na cor verde</p>
<p style="border-color: #0000ff">Borda na cor azul</p>

Usando somente a propriedade border em CSS

Como vimos, há várias maneiras de definirmos as bordas em elementos de um layout, através somente do CSS, podemo definir o tipo de borda, espessura e até a cor.

Para usar esse atalho, que é a propriedade border unicamente, baste dar como atributo um tamanho, uma cor e uma estilo.
Por exemplo, para que suas tags de cabeçalho H1 tenham espessura de 1 pixel, pontilhadas e de cor vermelha, e para que seus parágrafos sejam envolvidos por bordas de 2 pixels de largura, com borda sólida e azul, aplique o estilo CSS:

h1 {
 border: 1px dotted red;
}

p{
 border: 2px solid blue;
}

Ler Tutorial