Propiedad CSS border-right-style
La propiedad CSS border-right-style se utiliza para establecer el estilo del borde derecho de un elemento. Se define como una única palabra clave elegida entre las disponibles para la propiedad border-style. La border-style se utiliza para establecer el estilo de los cuatro lados de un elemento, pero border-right-style establece un estilo únicamente para el borde derecho.
El ancho predeterminado del borde derecho es medio. Se puede cambiar utilizando las propiedades border-right-width o border-width.
No todos los navegadores representan los estilos de la misma manera. Chrome actualmente representa los puntos como rectangulares, no circulares.
INFO
La especificación no establece la cantidad de espacio entre los puntos y los trazos.
INFO
La especificación no define cómo se conectan los bordes de diferentes estilos en las esquinas.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredable | 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 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>Observe un ejemplo donde se utilizan todos los valores de estilo para ver la diferencia entre ellos:
INFO
Dependiendo del valor de border-color, los efectos de los valores groove, ridge, inset y outset pueden variar.
Ejemplo de la propiedad border-right-style con todos los valores:
Ejemplo de la propiedad CSS border-right-style con 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 | Probar » |
|---|---|---|
| none | Define que no habrá ningún borde. Valor predeterminado. | Probar » |
| hidden | Es igual que "none" excepto en la resolución de conflictos de bordes para elementos de tabla. | Probar » |
| dotted | Define un borde punteado. | Probar » |
| dashed | Define un borde de trazos. | Probar » |
| double | Define un borde doble. | Probar » |
| solid | Define un borde sólido. | Probar » |
| groove | Define un borde acanalado en 3D. Su efecto puede cambiarse con el valor de border-color. | Probar » |
| ridge | Define un borde en relieve en 3D. Su efecto puede cambiarse con el valor de border-color. | Probar » |
| inset | Define un borde hundido en 3D. Su efecto puede cambiarse con el valor de border-color. | Probar » |
| outset | Define un borde saliente en 3D. Su efecto puede cambiarse con el valor de border-color. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Practice
¿Cuáles de los siguientes son valores válidos para la propiedad 'border-right-style' en CSS?