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

• color:
  1. código hexadecimal: #ffc6d9
  2. código rgb: rgb(255,235,0)
  3. código rgba: rgb(255,235,0, 0.7)
  4. código hsl: hsl(210,100%,40%)
  5. código hsla: hsla(155,80%,35%,0.4)
  6. palavra-chave: red, blue, green...etc
  7. transparente: transparent
• style:
  1. none: nenhuma borda
  2. hidden: equivalente a none
  3. dotted: borda pontilhada
  4. dashed: borda tracejada
  5. solid: borda contínua
  6. double: borda dupla
  7. groove: borda entalhada
  8. ridge: borda em ressalto
  9. inset: borda em baixo relevo
  10. outset: borda em alto relevo
• width:
  1. thin: borda fina
  2. medium: borda média
  3. thick: borda grossa
  4. length: unidade de medida CSS (px, pt, em, cm, ...)

Exemplos práticos

Vejamos a seguir alguns exemplos práticos.

border-width, border-style e border-color

<h3>Borda média, contínua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>

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:

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

<p>Borda com espessura inferior de 10px</p>

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:

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.

<p>Bordas em declaração única</p>

p {
  border: thick  groove  rgb(255,0,255)
}

Este é o efeito da folha de estilo acima:

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:

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

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:

• Personalização de bordas com imagens que ensina como criar bordas com uso de imagens
• Criando formas geométricas com bordas CSS que ensina como criar formas incríveis com uso da propriedade border das CSS.
• Borda serrilhada com CSS que ensina como criar bordas serrilhadas.

Compartilhe essa matéria com seus amigos