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
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.
PS1: 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.
PS2: A propriedade border-color não é reconhecida pelo Netscape. Use a propriedade border para ser reconhecida pelo Netscape.
border-style: valor (dotted, dashed, etc e tal...)Borda dotted
Borda dashed
Borda solid
Borda double
Borda groove
Borda ridge
Borda inset
Borda outset
Mil beijusxxx
