6. Bordas

21/03/2013 | |







Essa parte é a mais fácil, as bordas são bem simples de usar e são bem úteis também. Existem diversos tipos e se combinados com padding podem ter um efeito maravilhoso. Primeiramente vamos explicar a estrutura da borda, assim você vai ter o código e depois ensinarei os tipos, para que possa substituir e fazer sua escolha.

- Estrutura separada

A estrutura separada permite que você edite cada lado de uma imagem, de uma caixa ou de um texto, então se você quiser borda somente de um lado, dois ou três, mas não os quatro é o que recomendo. Veja como funcionam os códigos:

border-top: 2px solid #ffccff;
border-bottom: 2px solid #ff9966;
border-left: 2px solid #ff6699;
border-right: 2px solid #fff;

A propriedade vai ser border e mais a coordenada dele.

Se quiser borda no topo, é border-top.
Se quiser borda na parte de baixo, é border-bottom.
Se quiser borda na esquerda, é border-left.
E por fim, se quiser na direita, é borde-right.

Após a propriedade indicamos a espessura, que no nosso caso utilizamos 2 pixels. Também colocamos o tipo de borda - será explicado daqui a pouco - que no nosso caso foi solid e também a cor, que pode ser variada nesse tipo de estrutura.


- Estrutura unida

Esse tipo de estrutura serve para colocar o mesmo tipo, cor e tamanho de borda nos quatro lados do seu elemento. É recomendado caso você realmente deseje, pois do outro jeito dá um pouquinho mais de trabalho.

border: 2px solid #ffccff;

Ou seja, na unida você precisa colocar apenas border e nenhum tipo de coordenada. Bem simples e não tem nenhum segredo, mas agora vamos passar para os tipos de borda.


- Tipos de borda

Os tipos de bordas são bastante variados, por isso optei por deixar uma pequena lista com eles.


  • dashed - borda tracejada
  • dotted - borda pontilhada
  • solid - borda sólida comum
  • inset - borda com aspecto fundo
  • outset - borda com aspecto alto
  • ridge - borda saltada
  • groove - borda com aspecto de entalho
  • double - borda dupla
  • None - sem borda