Propiedad CSS border-right-width
La propiedad border-right-width se utiliza para definir el ancho del borde derecho de un elemento. El ancho del borde derecho, al igual que todos los demás lados del borde, también se puede definir con las propiedades abreviadas border o border-width.
Para establecer border-right-width, primero debes definir la propiedad border-style, ya que necesitas bordes antes de establecer su ancho. Se puede usar border-right-style o border-style para especificar el estilo del borde.
INFO
La especificación no define el grosor exacto de cada palabra clave. Sin embargo, siempre siguen este orden: thin ≤ medium ≤ thick.
INFO
La especificación no define cómo se conectan los bordes de diferentes anchos y estilos en las esquinas.
| Valor inicial | medium |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter. |
| Heredado | No |
| Animable | Sí. El ancho del borde es animable. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.borderRightWidth = "5px"; |
Sintaxis
Sintaxis de la propiedad CSS border-right-width
border-right-width: medium | thin | thick | length | initial | inherit;Ejemplo de la propiedad border-right:
Ejemplo de la propiedad CSS border-right-width con valor thick
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
padding: 8px;
width: 50%;
border-style: dotted;
border-right-width: thick;
}
</style>
</head>
<body>
<h2>Border-right-width example</h2>
<p>As you can see the width of the right border is set to thick.</p>
</body>
</html>Ejemplo de la propiedad border-right con todos los valores:
Ejemplo de la propiedad CSS border-right-width con valores medium, thin, thick, px, initial e inherit
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background: #ccc;
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;
border: solid;
}
.flex-center {
display: flex;
justify-content: center;
}
/* border-right-width example classes */
.b1 {
border-right-width: medium;
}
.b2 {
border-right-width: thin;
}
.b3 {
border-right-width: thick;
}
.b4 {
border-right-width: 10px;
}
.b5 {
border-right-width: initial;
}
.b6 {
border-right-width: inherit;
}
</style>
</head>
<body>
<h1>Border-right-width value examples</h1>
<main class="flex-center">
<div class="b1">
medium
</div>
<div class="b2">
thin
</div>
<div class="b3">
thick
</div>
</main>
<main class="flex-center">
<div class="b4">
10px lenght
</div>
<div class="b5">
initial
</div>
<div class="b6">
inherit
</div>
</main>
</body>
</html>Resultado
Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| medium | Define un borde derecho medio. Es el valor predeterminado de esta propiedad. | Probarlo » |
| thin | Define un borde derecho fino. Depende del agente de usuario determinar el ancho exacto. | Probarlo » |
| thick | Define un borde derecho grueso. Depende del agente de usuario determinar el ancho exacto. | Probarlo » |
| length | Define el grosor del borde derecho. Por ejemplo, 10px, 5em, 8pt, etc. | Probarlo » |
| initial | Establece la propiedad en su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Qué especifica la propiedad CSS 'border-right-width'?