Tutorial CSS: Bordas

Neste tutorial vamos ver como trabalhar com bordas utilizando CSS

Propriedades da borda

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

Maneira abreviada de trabalhar

border-top:........todas as propriedades da borda superior

border-right:.......todas as propriedades da borda direita

border-bottom:...todas as propriedades da borda inferior

border-left:........todas as propriedades da borda esquerda

border:..............todas as quatro bordas



Valores para serem setados nas propriedades da borda



color:

código hexadecimal: #FFFFFF

código rgb: rgb(255,235,0)

nome da cor: red, blue, green...etc

style:

none: nenhuma borda

hidden: equivalente a none

dotted: borda pontilhada

dashed: borda tracejada

solid: borda contínua

double: borda dupla

groove: borda entalhada

ridge: borda em ressalto

inset: borda em baixo relevo

outset: borda em alto relevo

width:

thin: borda fina

medium: borda média

thick: borda grossa

length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)







Veja também, CSS: Background