CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Bordas

Por Benedito Silva Júnior - publicado em 11/07/2016


As propriedades de bordas do CSS permitem especificar o estilo, a largura e a cor da borda de um elemento.

Podemos definir propriedades para definir a espessura, estilo, cor entre outras características.

A tabela abaixo mostra as propriedades que definem as características das quatro bordas de um elemento HTML:

Veja:

border-width define a espessura da borda
border-style define o estilo da borda
border-color define a cor da borda
border-top-width define a espessura da borda superior
border-top-style define o estilo da borda superior
border-top-color define a cor da borda superior
border-right-width define a espessura da borda direita
border-right-style define o estilo da borda direita
border-right-color define a cor da borda direita
border-bottom-width define a espessura da borda inferior
border-bottom-style define o estilo da borda inferior
border-bottom-color define a cor da borda inferior
border-left-width define a espessura da borda esquerda
border-left-style define o estiloda borda esquerda
border-left-color define a 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

Os valores válidos para as propriedades das bordas são:

color: código hexadecimal: #ffcc00 código rgb: rgb(255,255,0) código rgba: rgb(255,255,0, 0.9) código hsl: hsl(100,50%,80%) código hsla: hsla(105,50%,20%,0.2) palavra-chave: red, black, green, ... transparente: transparent 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: unidade de medida CSS (px, pt, em, cm, ...)

Exemplo:

p { border-style: dotted; border-color: #009909; background-color:#E8E8E8; padding-left: 15px; border-radius: 20px 20px 20px 20px; }

O resultado é:
Borda utilizando CSS 

 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo