A propriedade CSS border

Introdução

As propriedades para as bordas, definem as características das quatro bordas de um elemento HTML que são as listadas a seguir:

 border-width:..........define a espessura da borda
 border-style:..........define o estilo da borda
 border-color:..........define a cor da borda

 border-top-width:......define a espessura da borda superior
 border-top-style:......define o estilo da borda superior
 border-top-color:......define a cor da borda superior

 border-right-width:....define a espessura da borda direita
 border-right-style:....define a estilo da borda direita
 border-right-color:....define a cor da borda direita

 border-bottom-width:...define a espessura da borda inferior
 border-bottom-style:...define o estilo da borda inferior
 border-bottom-color:...define a cor da borda inferior

 border-left-width:.....define a espessura da borda esquerda
 border-left-style:.....define o estilo da borda esquerda
 border-left-color:.....define a cor da borda esquerda

 border-top:............maneira abreviada para todas   
	                      as propriedades da borda superior
 border-right:..........maneira abreviada para todas
                        as propriedades da borda direita
	 
 border-bottom:.........maneira abreviada para todas
                        as propriedades da borda inferior
	
 border-left:...........maneira abreviada para todas
                        as propriedades da borda esquerda
	
 border:................maneira abreviada para todas
                        as quatro bordas

Valores válidos para as propriedades das bordas

Exemplos práticos

Vejamos a seguir alguns exemplos práticos.

border-width, border-style e border-color

HTML
<h3>Borda média, contínua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>
CSS
h3 {
  border-width: medium;
  border-style: solid;
  border-color: #00f;
  }

p {
  border-width: 6px;
  border-style: dashed;
  border-color: #f00;
  }

Este é o efeito da folha de estilo acima:

Borda média, contínua e azul

Borda 6px, tracejada e vermelha

border-style

Observe a seguir os estilos de bordas obtidos com a declaração border-style e seus diferentes valores (foram definidas uma espessura de 16px e uma cor verde para as bordas).

Borda dotted

Borda dashed

Borda solid

Borda double

Borda groove

Borda ridge

Borda inset

Borda outset

border-width

HTML
<p>Borda com espessura inferior de 10px</p>
CSS
p {
  border-style: solid;
  border-bottom-width: 10px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}

Este é o efeito da folha de estilo acima:

Borda com espessura inferior de 10px

Para definir a espessura das bordas superior, esquerda e direita proceda de modo semelhante ao mostrado no código anterior.

border (declaração única)

Esta é a maneira abreviada de você declarar todos os valores para as propriedades das bordas, ou seja, pode-se definir valores para as três propriedades das bordas (border-width, border-style e border-color) em uma declaração única.

A sintaxe geral é esta: border: width style color; em qualquer ordem.

Nota: É de boa prática escolher, e adotar, sempre a mesma ordem.

HTML
<p>Bordas em declaração única</p>
CSS
p {
  border: thick  groove  rgb(255,0,255)
}

Este é o efeito da folha de estilo acima:

Bordas em declaração única

Valores iniciais

Valor inicial de uma propriedade CSS é o valor assumido por padrão para a propriedade quando não for explicitamente declarado.

O valor inicial para cada uma das três propriedades das bordas é mostrado a seguir:

border-width: medium
border-style: none
border-color: currentColor (a cor definida para a fonte do elemento
no qual a borda foi aplicada - se não for definida a cor inicial é a preta)

Observe as declarações de borda a seguir e seus efeitos:

CSS
border: solid /* borda contínua, espessura média, cor currentColor */
border: 10px dotted /* borda pontilhada, espessura 10px, cor currentColor */   
border: dashed red /* borda tracejada, espessura  média, cor vermelha */
border: solid /* borda contínua, espessura  média, cor currentColor */

Conclusão

As propriedades das bordas permitem que você controle o estilo a cor e a espessura das bordas de um elemento HTML.

As propriedades foram listadas e como você viu, podem ser declaradas para cada uma das quatro bordas individualmente ou em uma declaração abreviada.

Neste tutorial mostramos algumas das propriedades para estilização de bordas, fornecendo as bases para seus estudos mais completos.

Você poder fazer uso de um excelente editor de bordas para descobrir mais efeitos e complementar este tutorial, nesta página interativa.

Mais bordas

Visite os tutoriais:

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.