Bordas em CSS

Benedito Silva Júnior 15/11/2021

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

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

O seu computador está lento, travando ou dando tela azul… e você não faz ideia do que fazer?
Saiba que isso pode estar te fazendo perder dinheiro — seja com manutenção cara ou oportunidades que você está deixando passar.
Com o Super Técnico 2.0, você aprende na prática como diagnosticar defeitos, montar computadores do zero e fazer upgrades que realmente aumentam o desempenho, mesmo que você esteja começando do absoluto zero.
Você pode usar esse conhecimento para:
✔ Resolver seus próprios problemas sem depender de ninguém
✔ Ganhar dinheiro com manutenção e suporte técnico
✔ Ou até entrar de vez no mercado de TI

Tudo com aulas diretas ao ponto, sem enrolação e focadas no que realmente funciona no dia a dia.
👉 CLIQUE AQUI AGORA e veja todos os detalhes antes que essa oportunidade passe:

Deixe um comentário Cancelar resposta