Propiedad CSS border-right-style
La propiedad CSS border-right-style especifica el estilo del borde derecho de un elemento. Consulta todos los valores con ejemplos.
La propiedad CSS border-right-style establece el estilo de línea del borde derecho de un elemento, como solid, dashed o dotted. El valor es una palabra clave única elegida del mismo conjunto disponible para el shorthand border-style — la diferencia es que border-style aplica estilo a los cuatro lados a la vez, mientras que border-right-style apunta únicamente al borde derecho.
Esta es la contraparte por lado de border-style. Úsala cuando quieras un estilo de línea diferente en el lado derecho respecto a los demás lados — por ejemplo, un divisor sólido a la derecha de una barra lateral mientras que la parte superior, inferior e izquierda permanecen sin borde.
Por qué el borde puede no aparecer
Un borde tiene tres partes independientes: estilo, ancho y color. El estilo es la única parte obligatoria — si no estableces un estilo, el navegador utiliza el valor predeterminado none y el borde no se dibuja en absoluto, independientemente del ancho o color que le asignes. Por eso border-right-style es lo que realmente hace visible el borde derecho.
El ancho predeterminado del borde derecho es medium. Ajústalo con border-right-width o border-width, y establece su color con border-right-color. Para definir estilo, ancho y color en una sola declaración, usa el shorthand border-right.
No todos los navegadores renderizan los estilos de manera idéntica. Chrome, por ejemplo, renderiza los puntos dotted como pequeños cuadrados en lugar de círculos, y el espaciado exacto de puntos y guiones queda a criterio del navegador.
La especificación no define la cantidad de espacio entre los puntos y los guiones.
La especificación no define cómo se conectan los bordes de diferentes estilos en las esquinas.
| Valor inicial | none |
|---|---|
| Aplicable a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | No |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderRightStyle = "dashed"; |
Sintaxis
Sintaxis de la propiedad CSS border-right-style
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Ejemplo de la propiedad border-right-style:
Ejemplo de la propiedad CSS border-right-style con los valores solid y dotted
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-right-style: solid;
}
p {
border-right-style: dotted;
}
</style>
</head>
<body>
<h2>A Heading with solid border-right-style.</h2>
<p>A paragraph with dotted border-right-style.</p>
</body>
</html>Observa un ejemplo donde se usan todos los valores de estilo para ver la diferencia entre ellos:
Dependiendo del valor de border-color, los efectos de los valores groove, ridge, inset y outset pueden cambiar.
Ejemplo de la propiedad border-right-style con todos los valores:
Ejemplo de la propiedad CSS border-right-style con los valores hidden, dotted, dashed, solid, double, groove, ridge, inset y outset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #c9c5c5;
font-size: 20px;
text-align: center;
}
main div {
display: flex;
align-items: center;
justify-content: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
width: 200px;
height: 100px;
margin: 15px;
font-weight: bold;
background-color: #1c87c9;
border: 10px solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-style example classes */
.b1 {
border-right-style: hidden;
}
.b2 {
border-right-style: dotted;
}
.b3 {
border-right-style: dashed;
}
.b4 {
border-right-style: solid;
}
.b5 {
border-right-style: double;
}
.b6 {
border-right-style: groove;
}
.b7 {
border-right-style: ridge;
}
.b8 {
border-right-style: inset;
}
.b9 {
border-right-style: outset;
}
</style>
</head>
<body>
<h1>Border-right-style value examples</h1>
<main class="flex-center">
<div class="b1">
hidden
</div>
<div class="b2">
dotted
</div>
<div class="b3">
dashed
</div>
</main>
<main class="flex-center">
<div class="b4">
solid
</div>
<div class="b5">
double
</div>
<div class="b6">
groove
</div>
</main>
<main class="flex-center">
<div class="b7">
ridge
</div>
<div class="b8">
inset
</div>
<div class="b9">
outset
</div>
</main>
</body>
</html>Resultado
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| none | Define que no habrá ningún borde. Valor predeterminado. | Pruébalo » |
| hidden | Es igual que "none" excepto en la resolución de conflictos de bordes para elementos de tabla. | Pruébalo » |
| dotted | Define un borde punteado. | Pruébalo » |
| dashed | Define un borde discontinuo. | Pruébalo » |
| double | Define un borde doble. | Pruébalo » |
| solid | Define un borde sólido. | Pruébalo » |
| groove | Define un borde acanalado en 3D. Su efecto puede cambiar con el valor de border-color. | Pruébalo » |
| ridge | Define un borde en relieve en 3D. Su efecto puede cambiar con el valor de border-color. | Pruébalo » |
| inset | Define un borde hundido en 3D. Su efecto puede cambiar con el valor de border-color. | Pruébalo » |
| outset | Define un borde saliente en 3D. Su efecto puede cambiar con el valor de border-color. | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado. | Pruébalo » |
| inherit | Hereda la propiedad de su elemento padre. |
none vs hidden
Las dos palabras clave parecen iguales en un elemento normal — ambas no dibujan ninguna línea. La diferencia solo importa en tablas con bordes colapsados: con border-collapse: collapse, un borde hidden gana la resolución de conflictos de bordes y suprime el borde de la celda vecina, mientras que none tiene la prioridad más baja y es sobrescrito por cualquier borde adyacente.
Propiedades relacionadas
- border-right — shorthand para el ancho, estilo y color del borde derecho.
- border-right-width y border-right-color — las otras dos partes del borde derecho.
- border-style — establece el estilo de línea de los cuatro lados a la vez.