:: A propriedade border ::

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.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

Criado em: 2003-12-11