Propiedad CSS border-right-color
La propiedad border-right-color define el color del borde derecho de un elemento.
El color del borde derecho, combinado con los colores de los bordes superior, derecho e inferior, también se puede definir con la propiedad abreviada border-color.
Si utiliza la propiedad border-right-color, primero debe establecer las propiedades border-style o border-right-style y luego cambiar el color del estilo definido.
El ancho predeterminado de un borde es medium. Puede especificar el ancho utilizando las propiedades border-width o border-right-width.
| Valor inicial | currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | Sí. El color del borde derecho es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderRightColor = "black"; |
Sintaxis
Sintaxis de la propiedad CSS border-right-color
border-right-color: color | transparent | initial | inherit;Ejemplo de la propiedad border-right-color:
Ejemplo de la propiedad CSS border-right-color
<!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 de la propiedad border-right-color con el valor "transparent":
Ejemplo de la propiedad CSS border-right-color con valor transparente
<!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>INFO
Puede establecer valores hexadecimales, RGB, RGBA, HSL, HSLA o nombres de colores como valor para la propiedad border-right-color.
Resultado
Ejemplo de la propiedad border-right-color con un color nombrado:
Ejemplo de la propiedad CSS border-right-color con valor de 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 de la propiedad border-right-color con un valor hexadecimal:
Ejemplo de la propiedad CSS border-right-color con 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 de la propiedad border-right-color con un valor RGB:
Ejemplo de la propiedad CSS border-right-color con 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 de la propiedad border-right-color con un valor HSL:
Ejemplo de la propiedad CSS border-right-color con 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>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| color | Define el color del borde derecho. El color predeterminado es el del elemento actual. Se pueden usar nombres de colores, códigos hexadecimales, rgb(), rgba(), hsl(), hsla(). Valor obligatorio. | Probarlo » |
| transparent | Aplica un color transparente al borde derecho. El borde derecho seguirá ocupando el espacio definido por el valor border-width. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué hace la propiedad CSS 'border-right-color'?