Propiedad CSS border-right

La propiedad CSS border-right establece el ancho, el estilo de línea y el color del borde derecho de un elemento. Es una propiedad abreviada que permite definir tres propiedades independientes en una sola declaración:

border-right-width — el grosor del borde,
border-right-style — el estilo de línea (solid, dotted, dashed, etc.),
border-right-color — el color de la línea.

En lugar de escribir tres reglas, puedes escribir una sola:

/* shorthand */
border-right: 3px solid #1c87c9;

/* equivalent longhand */
border-right-width: 3px;
border-right-style: solid;
border-right-color: #1c87c9;

Los tres valores pueden especificarse en cualquier orden, y uno o dos de ellos pueden omitirse. Cuando se omite un valor, se utiliza su valor por defecto:

Si se omite el estilo, el borde no se renderiza en absoluto — border-right-style tiene por defecto none, razón por la que siempre debes incluir un estilo para que el borde sea visible.
Si se omite el ancho, su valor por defecto es medium.
Si se omite el color, el borde toma el valor color del elemento; si tampoco está definido, usa el color del texto actual (negro por defecto).

Cuándo usar border-right

Usa border-right cuando quieras una línea en un solo lado de una caja — por ejemplo, un divisor vertical entre una barra lateral y el contenido principal, un acento decorativo en una tarjeta, o un separador al estilo de subrayado girado en una columna. Si necesitas el mismo borde en los cuatro lados, utiliza la propiedad abreviada border; para los otros lados individuales consulta border-left, border-top y border-bottom.

Valor por defecto	medium none currentColor
Se aplica a	Todos los elementos. También se aplica a ::first-letter.
Heredada	No
Animable	Sí. El ancho y el color son animables.
Versión	CSS1
Sintaxis DOM	object.style.borderRight = "1px solid black";

Sintaxis

Sintaxis de la propiedad CSS border-right

border-right: border-width border-style border-color | initial | inherit;

Ejemplo de la propiedad border-right:

Ejemplo de la propiedad CSS border-right

<!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>

Pruébalo tú mismo »

Resultado

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

La propiedad border-right puede aplicarse a diferentes elementos y admite varios valores de estilo.

Ejemplo de la propiedad border-right con múltiples valores:

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

Pruébalo tú mismo »

También puedes crear una caja con el elemento <div> y establecer un background-color para tu caja, luego añadir un borde derecho para obtener una caja con estilo.

Ejemplo de uso de la propiedad border-right para crear una caja con estilo:

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

Pruébalo tú mismo »

Consejos y errores comunes

Incluye siempre un estilo. Escribir solo border-right: 2px #1c87c9; no muestra nada porque el estilo tiene por defecto none. Añade una palabra clave como solid.
El orden es flexible. border-right: solid 5px red; y border-right: 5px solid red; son equivalentes.
La propiedad abreviada restablece las partes omitidas. Escribir border-right: 5px solid; restablece el color al color del texto actual, aunque hayas definido border-right-color anteriormente. Usa las propiedades individuales cuando quieras cambiar solo una parte sin modificar las demás.
Los bordes aumentan el tamaño del diseño a menos que se establezca box-sizing: border-box, ya que el valor por defecto content-box añade el ancho del borde al ancho total del elemento.

Valores

La propiedad abreviada acepta los valores de sus tres propiedades individuales, además de las palabras clave CSS globales:

Valor	Descripción
border-right-width	Establece el ancho del borde derecho de un elemento. El valor por defecto es "medium". Valor obligatorio.
border-right-style	Establece el estilo de línea del borde derecho de un elemento. El valor por defecto es "none". Valor obligatorio.
border-right-color	Establece el color del borde derecho de un elemento. El valor por defecto es el color actual del texto.
initial	Establece la propiedad a su valor por defecto.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué atributos puedes especificar al trabajar con la propiedad border-right en CSS?

border-right-widthborder-right-styleborder-right-colorborder-right-paddingborder-right-margin

Propiedades relacionadas

border — establece los cuatro bordes a la vez.
border-left, border-top, border-bottom — las otras propiedades abreviadas para lados individuales.
border-right-width, border-right-style, border-right-color — las propiedades individuales del borde derecho.
border-radius — redondea las esquinas donde se unen los bordes.