Propiedad border-right de CSS
La propiedad CSS border-right establece el ancho, el estilo de línea y el color del borde derecho de los elementos. Es una propiedad abreviada para especificar los valores de las siguientes propiedades:
Estos tres valores de la propiedad abreviada pueden especificarse en cualquier orden, y uno o dos de ellos pueden omitirse.
El valor se tomará de la propiedad color en caso de que no se especifique el color. Si la propiedad de color no está definida, tomará el color negro por defecto.
Si no se especifica el width, tomará el tamaño medio del elemento.
| Valor predeterminado | medium none currentColor |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | No |
| Animatable | Sí. El ancho y el color son animables. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderRight = "1px solid black"; |
Sintaxis
Sintaxis de la propiedad border-right de CSS
border-right: border-width border-style border-color | initial | inherit;Ejemplo de la propiedad border-right:
Ejemplo de la propiedad border-right de CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border-right: 5px solid #1c87c9;
padding: 10px;
}
</style>
</head>
<body>
<h2>Border-right example</h2>
<div> This is a simple example for the border-right property.</div>
</body>
</html>Resultado
La propiedad border-right se puede aplicar a diferentes elementos y puede tener varios valores de estilo.
Ejemplo de la propiedad border-right con múltiples valores:
Ejemplo de la propiedad border-right de CSS con valores solid, dotted y double
<!DOCTYPE html>
<html>
<head>
<style>
h1,
p,
div {
padding: 10px;
}
h1 {
border-right: 7px solid #8ebf42;
}
p {
border-right: 5px dotted #1c87c9;
}
div {
border-right: thick double #666;
}
</style>
</head>
<body>
<h1>A heading with a solid green right border</h1>
<p>A heading with a dotted blue right border.</p>
<div>A div element with a thick double right border.</div>
</body>
</html>También puedes crear un cuadro con el elemento <div> y establecer un background-color para tu cuadro, luego agregar un borde derecho para tener un cuadro decorativo.
Ejemplo de uso de la propiedad border-right para crear un cuadro decorativo:
Ejemplo de la propiedad border-right de CSS con propiedad solid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 300px;
height: 80px;
text-align: center;
padding: 20px;
background: #ccc;
border-right: 5px solid #000;
}
</style>
</head>
<body>
<div>This box has a solid border on the right side.</div>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| border-right-width | Establece el ancho del borde derecho de un elemento. El valor predeterminado es "medium". Valor requerido. |
| border-right-style | Establece el estilo de línea del borde derecho de un elemento. El valor predeterminado es "none". Valor requerido. |
| border-right-color | Establece el color del borde derecho de un elemento. El valor predeterminado es el color actual del texto. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué atributos puedes especificar al trabajar con la propiedad border-right en CSS?