Estilos de borda CSS

Explicação dos diferentes tipos ou estilos de bordas que podemos criar em CSS, através do atributo border.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 16/3/09
Valorize este artigo:
CSS permite criar vários tipos de bordas em elementos da página. A borda mais habitual é a de uma linha lisa, porém, também há outros tipos de bordas que podemos implementar como uma linha de pontos, bordas arredondadas, etc. Neste artigo de CriarWeb.com veremos as distintas possibilidades de criação de bordas em CSS.

Na verdade, já falamos várias vezes em CriarWeb.com de bordas com CSS, sobretudo para explicar modos de fazer as bordas arredondadas, que costumam ficar muito atraentes nas páginas web. De qualquer forma, veremos como se especifica uma borda com CSS.

DIV {
   border: 1px solid #d0d0d0;
}

Assim, conseguiremos que todas as etiquetas DIV da página tenham uma borda de 1 pixel, sólido (de uma linha sólida) e com cor acinzentada (#d0d0d0).

O que vamos ver neste artigo são os diferentes estilos de borda, além do solid que já conhecemos. Para ilustrar o exercício, criamos uma página com os distintos exemplos de bordas. Porém, já que estamos falando de bordas, sobre sua declaração em CSS, cabe dizer que poderíamos utilizar outra notação distinta, na qual especificamos separadamente os três atributos da borda, como segue:

.bordasolido{
   border-color: #aaaaaa;
   border-width: 1px;
   border-style: solid;
}


Também podemos especificar as bordas separadamente de cada um dos lados do elemento, desta maneira:

.bordaporlados{
   border-top: 1px solid #ff9999;
   border-right: 2px dotted #99ff99;   
   border-bottom: 2px dashed #9999ff;
   border-left: 4px double #666666;
}


Todas estas indicações para a construção de bordas, já vimos em artigos anteriores de CSS em criarweb.com, como o manual de CSS ou o workshop de CSS.

Estilos de borda

Com o atributo border-style podemos definir vários estilos de borda, entre uma gama relativamente ampla de possibilidades. Não obstante, temos que admitir que muitos dos estilos fazem bordas um pouco feias, que deveríamos utilizar com bastante cuidado.

Os possíveis estilos de borda são:
  • solid
  • dotted
  • double
  • dashed
  • groove
  • ridge
  • inset
  • outset
Podemos ver todos estes estilos de borda em uma página à parte.

Agora vamos comentar estes distintos estilos e dar exemplos de cada um.

Borda solid:
Esta borda é de uma linha sólida.

.bordasolida{
   border:-color: #aaaaaa;
   border-width: 1px;
   border-style: solid;
}


Borda dotted (pontilhada):
Esta borda está composta à base de uma linha de pontos.

.bordapontilhada{
   border: 1px dotted #ff8833;
}


Borda double (Dupla):
A borda dupla está composta por uma linha dupla sólida. Há que saber que para que esta borda se veja como uma linha dupla, temos que especificar uma largura de pelo menos 3 pixel. Assim, se veria uma borda com duas linhas de um pixel mais um espaço de separação da borda de outro pixel. À medida que especificamos uma largura maior da borda dupla, as linhas vão aumentando de grossura, assim como o espaço que as separa.

.bordadupla{
   border: 9px double #990000;
}


Borda dashed (linha descontínua):
A borda dashed é muito parecida com a borda pontilhada, porém no lugar dos pontos, o que temos é uma linha partida.

.bordadashed{
   border: 1px dashed #660000;
}


Borda groove (ranhura):
É uma borda especial, com uma espécie de relevo difícil de descrever, criado com a combinação de cores claras e escuras de borda.

.bordagroove{
   border: 5px groove #66cc66;
}


Borda ridge (crista):
Este borda também é um pouco diferente. Parecida ao groove, porém com as cores escuras e claras invertidas.

div.bordaridge{
   border: 10px ridge #6666cc;
}


Borda inset (relevo para dentro):
Cria uma borda com uma imitação de chanfrado, como se estivesse fundido. O efeito desta borda se vê melhor se o elemento que estiver na borda tiver uma cor de fundo parecida à cor da borda.

div.bordainset{
   border: 10px inset #3333ff;
   background-color: #0000ff;
}

Borda outset (com relevo para fora):
Este último estilo de borda imita um chanfrado, como se fosse um botão que está levantado. É igual ao estilo de borda inset, porém com as cores claras e escuras invertidas. Veremos também este efeito melhor se o elemento tiver uma cor de fundo.

div.bordaoutset{
   border: 10px outset #cccccc;
   background-color: #cccccc;
}


Novamente, coloco o link ao exemplo onde aparecem todos estes estilos de borda.

Borda arredondada com CSS

A borda arredondada, ou com as esquinas em curva, se pode especificar a partir de CSS 3. Isto já foi explicado no artigo: Bordas arredondadas em CSS 3.





Comentários do artigo
Foram enviados 4 comentários ao artigo
2 comentários não revisados
2 comentários revisados:
MANUAL CSS
Por: tomcamp
24/3/09
Olá gente!

Parabéns ao CriarWeb com esses excelentes manuais
escritos por esse brilhantes gênios da informática.

Obrigado ao Autor e tb ao Tradutor desta matéria.

Tom.
Thanks!
Por: jose-scharan
05/4/09
Simples, didático e muuuiiito útil. Parabéns!

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato