Propiedad CSS border-right-color
La propiedad border-right-color define el color del borde derecho de un elemento. Consulta todos los valores con ejemplos.
La propiedad CSS border-right-color define el color del borde derecho de un elemento. Permite estilizar el borde derecho de forma independiente de los otros tres lados, lo cual resulta útil para separadores, destacados y diseños de caja asimétricos.
Un borde tiene tres ingredientes — ancho, estilo y color — y los tres deben estar presentes para que el borde se muestre. Un color por sí solo no pinta nada, porque un borde sin estilo tiene como valor predeterminado none. Por eso, siempre que uses border-right-color, asegúrate de que también haya un estilo establecido mediante border-style o border-right-style. El ancho predeterminado es medium; puedes ajustarlo con border-width o border-right-width.
Si quieres establecer los cuatro lados a la vez, utiliza la propiedad abreviada border-color, que acepta hasta cuatro valores para los bordes superior, derecho, inferior e izquierdo.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredada | No |
| Animatable | Sí. El color del borde derecho es animatable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderRightColor = "black"; |
Sintaxis
border-right-color: color | transparent | initial | inherit;El valor es un único <color>, o una de las palabras clave globales de CSS. Ten en cuenta que, a diferencia de la propiedad abreviada border-color, esta propiedad nunca acepta más de un valor — solo afecta al lado derecho.
Ejemplo de la propiedad border-right-color
En el ejemplo siguiente, se aplica un borde gris uniforme a un cuadro y luego solo el borde derecho se colorea en 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>Ejemplo con el valor "transparent"
La palabra clave transparent oculta el color del borde derecho mientras conserva el espacio que ocupa. Esto es útil para crear flechas y triángulos, o para evitar que los diseños cambien de tamaño cuando se activa o desactiva un borde:
<!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>Puedes usar valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de color como valor para la propiedad border-right-color.
Resultado
Los cuatro formatos de valor a continuación producen el mismo efecto — solo difieren en cómo se escribe el color.
Ejemplo con un color nombrado
<!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>Ejemplo con un 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>Ejemplo con un 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>Ejemplo con un 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>Si omites border-right-style (o border-style), el color no tiene efecto visible — un borde sin estilo tiene como valor predeterminado none y no renderiza nada.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| color | Define el color del borde derecho. El color predeterminado es el color del elemento actual. Se pueden usar nombres de color, códigos de color hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor obligatorio. | Pruébalo » |
| transparent | Aplica un color transparente al borde derecho. El borde derecho seguirá ocupando el espacio definido por el valor border-width. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |