A propriedade border

Publicado em: 11/12/2003

As bordas nos elementos HTML

As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML.

As propriedades para as bordas são as listadas abaixo:

border-width:................espessura da borda
border-style:................estilo da borda
border-color:................cor da borda
-----------------------------------------
border-top-width:............espessura da borda superior
border-top-style:............estilo da borda superior
border-top-color:............cor da borda superior
-----------------------------------------
border-right-width:.........espessura da borda direita
border-right-style:..........estilo da borda direita
border-right-color:..........cor da borda direita
-----------------------------------------
border-bottom-width:.........espessura da borda inferior
border-bottom-style:.........estilo da borda inferior
border-bottom-color:.........cor da borda inferior
-----------------------------------------
border-left-width:...........espessura da borda esquerda
border-left-style:...........estilo da borda esquerda
border-left-color:...........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: #FFFFFF
2. código rgb: rgb(255,235,0)
3. nome da cor: red, blue, green...etc
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: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Vamos a seguir analisar algumas delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito dos tutoriais.

border-width, border-style e border-color

<html>
<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

Nota: A propriedade border-color não é reconhecida pelo Internet Explorer se for usada isolada. Use a propriedade border-style para ser reconhecida pelo Internet Explorer.

Nota: A propriedade border-color não é reconhecida pelo Netscape. Use a propriedade border para ser reconhecida pelo Netscape.

border-style

Abaixo os estilos de bordas obtidos com a declaração border-style: valor (dotted, dashed, etc..)

Borda dotted

Borda dashed

Borda solid

Borda double

Borda groove

Borda ridge

Borda inset

Borda outset

border-width

Estude o código abaixo e tire suas conclusões de como obter outros efeitos com espessuras de bordas

<html>
<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

Nota: A propriedade border-bottom-width não é reconhecida pelo Internet Explorer se usada isoladamente. Use border-style para ser reconhecida pelo Internet Explorer.

Definir a espessura das bordas superior, esquerda e direita

Proceda de modo semelhante ao mostrado acima.

border (declaração única)

Esta é a maneira abreviada de você escrever uma regra para as propriedades das bordas.

Você pode declarar todas as tres propriedadesdas bordas em uma regra única:

A sintaxe geral é esta: border: size style color; em qualquer ordem.
Nota: Aconselho a escolher, e adotar, sempre a mesma ordem.

<html>
<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

Propriedades CSS das bordas

As propriedades das bordas permitem que você controle o estilo a cor e a espessura das bordas de um elemento HTML.
As propriedades são muitas e como você viu, podem ser declaradas para cada uma das quatro bordas individualmente.

Neste tutorial abordei sumariamente algumas das propriedades, 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.