Propriedade CSS border-right-color
A propriedade border-right-color define a cor da borda direita de um elemento. Veja todos os valores com exemplos.
A propriedade CSS border-right-color define a cor da borda direita de um elemento. Ela permite estilizar a borda direita de forma independente dos outros três lados, o que é útil para divisores, destaques e designs de caixa assimétricos.
Uma borda possui três ingredientes — largura, estilo e cor — e todos os três devem estar presentes para que a borda seja renderizada. Uma cor sozinha não pinta nada, pois uma borda sem estilo assume o valor padrão none. Portanto, sempre que definir border-right-color, certifique-se de que um estilo também esteja definido via border-style ou border-right-style. A largura padrão é medium; ajuste-a com border-width ou border-right-width.
Se você quiser definir todos os lados de uma vez, use o shorthand border-color, que aceita até quatro valores para as bordas superior, direita, inferior e esquerda.
| Valor Inicial | currentColor |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter. |
| Herdado | Não |
| Animável | Sim. A cor da borda direita é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.borderRightColor = "black"; |
Sintaxe
border-right-color: color | transparent | initial | inherit;O valor é uma única <color>, ou uma das palavras-chave CSS globais. Observe que, ao contrário do shorthand border-color, esta propriedade nunca aceita mais de um valor — ela afeta apenas o lado direito.
Exemplo da propriedade border-right-color
No exemplo abaixo, uma borda cinza uniforme é aplicada a uma caixa e, em seguida, apenas a borda direita é recolorida de azul:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
padding: 20px;
border-style: solid;
border-color: #ccc;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Border-right-color example</h2>
<div>Example for the border-right-color property with different right border color.</div>
</body>
</html>Exemplo com o valor "transparent"
A palavra-chave transparent oculta a cor da borda direita enquanto mantém o espaço que ela ocupa. Isso é útil para criar setas e triângulos, ou para evitar que os layouts se desloquem quando uma borda é ativada ou desativada:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
padding: 3px;
text-align: center;
border: 15px groove #1c87c9;
border-right-color: transparent;
}
</style>
</head>
<body>
<h2>A heading with a transparent right border</h2>
</body>
</html>Você pode usar valores hexadecimais, RGB, RGBA, HSL, HSLA ou nomes de cores como valor para a propriedade border-right-color.
Resultado
Os quatro formatos de valor abaixo produzem o mesmo efeito — eles diferem apenas na forma como a cor é escrita.
Exemplo com um nome de cor
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: black;
}
</style>
</head>
<body>
<div>Border-right-color property with a named color value.</div>
</body>
</html>Exemplo com um valor hexadecimal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: #1c87c9;
}
</style>
</head>
<body>
<div>Border-right-color property with a hexadecimal value.</div>
</body>
</html>Exemplo com um valor RGB
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: rgb(142, 191, 66);
}
</style>
</head>
<body>
<div>Border-right-color property with a RGB value.</div>
</body>
</html>Exemplo com um valor HSL
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 3px;
border-right-style: solid;
border-right-color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>
<div>Border-right-color property with a HSL value.</div>
</body>
</html>Se você omitir border-right-style (ou border-style), a cor não terá efeito visível — uma borda sem estilo assume o valor padrão none e não renderiza nada.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| color | Define a cor da borda direita. A cor padrão é a cor do elemento atual. Podem ser usados nomes de cores, códigos de cor hexadecimais, rgb(), rgba(), hsl(), hsla(). Valor obrigatório. | Experimente » |
| transparent | Aplica uma cor transparente à borda direita. A borda direita ainda ocupará o espaço definido pelo valor border-width. | Experimente » |
| initial | Define a propriedade para seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |