Bordas


Vamos começar com a borda sólida "solid": .bordasolida {     border: 1px solid #aaaaaa; }

Bordas distintas para cada lado: .bordaporlados {     border-top: 1px solid #ff9999;     border-right: 2px dotted #99ff99;     border-bottom: 2px dashed #9999ff;     border-left: 3px double #666666; }

Borda com linha de pontos "dotted": .bordapontilhada {     border: 2px dotted #ff8833; }

Este elemento DIV tem uma borda dupla ("double"), porém para vê-la temos que colocar uma largura de borda maior: .bordadupla {     border: 3px double #990000; }

Este DIV tem a borda "dashed", que é como pontilhado, porém com o ponto mais comprido: .bordadashed {     border: 2px dashed #660000; }

Borda do tipo "groove", que cria uma espécie de relevo: .bordagroove {     border: 5px groove #006600; }

Borda tipo "ridge": .bordaridge {     border: 10px ridge #6666cc; }

Borda "inset", que também cria uma espécie de relevo como se o elemento estivesse fundido, combiando a borda em distintos tons mais claros ou escuros: .bordainset {     border: 10px inset #0000ff;     background-color: #0000ff; }

Borda "outset", que é como se a borda produzisse um relevo que imita como se estivesse levantado. sNeste caso coloquei uma cor de fundo para que se veja melhor o efeito: div.bordaoutset {     border: 10px outset #cccccc;     background-color: #cccccc; }





Comentários

Copyright © 2018 Anderson Bravo
www.andersonbravo.com.br
anderson@andersonbravo.com.br