Propriedade da cor da fronteira em CSS
A propriedade da cor da fronteira aceita as cores em várias tendências, como o nome exato das cores, uma representação hexadecimal da cor e as representações RGB/RGBA.
Este artigo fornece as maneiras possíveis de definir a propriedade da cor da fronteira de um elemento HTML.
Como funciona a propriedade da cor da fronteira em CSS
Um elemento é cercado por quatro bordas, superior, inferior, inferior e superior. A propriedade da cor da fronteira no CSS segue a sintaxe fornecida abaixo:
Border-Color: Value;A palavra-chave da cor da borda permanece a mesma, enquanto o valor depende do requisito do usuário e pode ser o nome de cor exato, o valor hexadecimal da cor ou a combinação RGB/RGBA.
Como usar a propriedade de cor de borda no CSS
Esta seção é composta por vários cenários para aplicar propriedades de cor de fronteira no CSS.
Exemplo 1: Usando a combinação RGB
Na computação, o RGB (azul verde vermelho) é o padrão amplamente utilizado ao passar pelo gerenciamento de cores. O valor de R, G e B varia de 0 a 255 e cada combinação de valores retorna uma cor diferente.
Por exemplo, o seguinte código HTML pratica a classe CSS interna para definir a cor da borda.
Bem -vindo ao Linuxhint
A imagem do código acima é fornecida abaixo:
Saída:
Exemplo 2: Usando a combinação RGBA
O RGBA (vermelho, verde, azul, alfa) é uma extensão de RGB, e o alfa representa a transparência da cor. O valor alfa varia de 0.0 a 1.0 (0.0 é o menos transparente e 1.0 é o mais transparente). O código fornecido abaixo pratica o CSS interno para aplicar o RGBA:
Bem -vindo ao Linuxhint
Uma classe CSS é criada chamada "Bor-Color", que contém a propriedade da cor da borda. Esta classe é então usada no elemento parágrafo do corpo.
Saída:
Exemplo 3: Usando o nome de uma cor
O nome de cor exato pode ser usado para especificar a cor da borda, conforme ilustrado no código a seguir
Bem -vindo ao Linuxhint
O código HTML acima contém,
- Uma etiqueta de estilo para adicionar uma classe CSS chamada "Bor-Col" para definir a cor de borda
- e um parágrafo é criado que está associado à classe CSS
Saída:
Exemplo 4: Usando o valor hexadecimal da cor
O valor hexadecimal de uma cor também pode ser usado para a cor da borda. O código a seguir pratica o código hexadecimal de cor preta para usá -lo para a cor da borda:
Bem -vindo ao Linuxhint
Uma classe CSS é definida no código acima para definir a cor da borda em formato hexadecimal e um parágrafo é criado para usar essa classe CSS.
Saída:
Exemplo 5: Usando propriedades de cor de borda em fronteiras individuais
A propriedade da cor da fronteira é subdividida em cor de fronteira, cor de borda-direita, cor de borda e cor de borda para colorir os lados da borda. O código a seguir é praticado para dar cores aos lados da fronteira individualmente.
O lado superior da borda é colorido
O lado direito da borda é colorido
O lado inferior da borda é colorido
O lado esquerdo da borda é colorido
No código acima escrito,
- Quatro classes CSS são criadas denominadas como "Top", "Right", "Bottom" e "Left" que são usadas para aplicar "cor-top-top", "cor de borda-direita", "cor-cor de fronteira ", E" cor de borda-esquerda ".
- As fronteiras do parágrafo são denominadas sólidas
- Quatro parágrafos são criados e cada um contém uma classe CSS
Saída:
Conclusão
A propriedade da cor da fronteira do CSS permite alterações na cor da borda de acordo com os requisitos. Este post descritivo fornece a demonstração do uso da propriedade da cor da fronteira no CSS para mudar a cor da borda. Existem inúmeras maneiras de fazer isso, a propriedade da cor da fronteira aceita as cores em várias tendências, como o nome exato da cor, uma representação hexadecimal da cor e as representações RGB/RGBA. No final, você teria aprendido a aplicação de propriedades de borda na CSS, explorando vários cenários declarados neste guia.