Bordas em CSS

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

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 é:

QUER SER UM PROGRAMADOR FULL-STACK E DOMINAR AS PRINCIPAIS TECNOLOGIAS DO MERCADO?

Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.

Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!

CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:

CLIQUE AQUI E SAIBA MAIS

Anatomia em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?

Receba grátis o e-book Como Formatar um PC em 5 Minutos

Deixe um comentário Cancelar resposta