A propriedade CSS border

visualizações (desde 26/05/2016) Publicado em: 11/12/2003 — Atualizado em: ➠ 26/05/2016

Definindo bordas para os elementos HTML

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

...
<head>
<style type="text/css">
  h3 {
    border-width: medium;
    border-style: solid;
    border-color: #00f;
    }
  
  p {
    border-width: 6px;
    border-style: dashed;
    border-color: #f00;
    }
</style>
</head>
<body>
  <h3>Borda média, contínua e azul</h3>
  <p>Borda 6px, tracejada e vermelha</p>
</body>
</html>

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

...
<head>
<style type="text/css">
  p {
    border-style: solid;
    border-bottom-width: 10px;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    }
</style>
</head>
<body>
  <p>Borda com espessura inferior de 10px</p>
</body>
</html>

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.

...
<head>
<style type="text/css">
  p {
    border: thick  groove  rgb(255,0,255)
    }
</style>
</head>
<body>
  <p>Bordas em declaração única</p>
</body>
</html>

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:

  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:

X

Matérias recomendadas

A sintaxe da regra CSS

Seletores CSS3