Propiedad CSS border-right-width

La propiedad CSS border-right-width establece el ancho (grosor) únicamente del borde derecho de un elemento. Controla solo un lado, lo que resulta útil cuando se necesita un borde asimétrico — por ejemplo, una línea de acento gruesa en el lado derecho de una barra lateral o cita destacada mientras los otros tres lados permanecen delgados o ausentes.

También puedes definir el ancho del borde derecho mediante las propiedades abreviadas border o border-width. Usa border-right-width cuando necesites específicamente anular o ajustar un lado sin afectar los demás.

Por qué se requiere un estilo de borde primero

Un borde no tiene ancho visible a menos que también tenga un estilo. Si estableces border-right-width pero dejas el estilo del borde derecho en su valor predeterminado (none), no se renderiza nada — un borde none colapsa a cero independientemente del ancho que se indique. Por eso, declara siempre un estilo primero, usando border-right-style, border-style, o la abreviación border. Para establecer también el color, consulta border-right-color.

/* Width alone does nothing — there is no style to give it a width. */
.broken {
  border-right-width: 8px;
}

/* Style + width — now the 8px right border is visible. */
.works {
  border-right-style: solid;
  border-right-width: 8px;
}

Información

La especificación no define el grosor exacto de cada palabra clave. Sin embargo, siempre siguen este orden: thin ≤ medium ≤ thick.

Información

La especificación no define cómo se conectan en las esquinas los bordes de diferente ancho y estilo.

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-width:

Ejemplo de la propiedad CSS border-right-width con el 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>

Pruébalo tú mismo »

Ejemplo de la propiedad border-right-width con todos los valores:

Ejemplo de la propiedad CSS border-right-width con los 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 length
      </div>
      <div class="b5">
        initial
      </div>
      <div class="b6">
        inherit
      </div>
    </main>
  </body>
</html>

Pruébalo tú mismo »

Resultado

![Propiedad CSS border-right-width](/uploads/media/default/0001/03/ed2548511ad8d4ee5076d931f7bb68eeb452cec5.png "Propiedad CSS border-right-width" =420x)

Valores

Valor	Descripción	Pruébalo
medium	Define un borde derecho mediano. Es el valor predeterminado de esta propiedad.	Pruébalo »
thin	Define un borde derecho delgado. El agente de usuario determina el ancho exacto.	Pruébalo »
thick	Define un borde derecho grueso. El agente de usuario determina el ancho exacto.	Pruébalo »
length	Define el grosor del borde derecho como una longitud explícita. Por ejemplo, 10px, 5em, 8pt, etc. No se permiten valores negativos.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

border-right-style — necesario para que el ancho sea visible.
border-right-color — establece el color del borde derecho.
border-right — abreviación para el ancho, estilo y color del borde derecho.
border-width — establece el ancho de los cuatro lados a la vez.
border-left-width, border-top-width, border-bottom-width — las demás propiedades de ancho por lado.

Práctica

¿Qué especifica la propiedad CSS 'border-right-width'?

Especifica el color del borde derecho.Especifica el ancho del borde derecho.Especifica el estilo del borde derecho.Especifica el tamaño del margen derecho.