La Propiedad BORDER-RIGHT

La propiedad border-right en CSS se utiliza para establecer el estilo del borde derecho de un elemento HTML.

 

La propiedad border-right en CSS se utiliza para establecer el estilo del borde derecho de un elemento HTML. Al igual que border-left, border-top y border-bottom, es una propiedad abreviada que te permite definir el ancho, el estilo y el color del borde derecho en una sola declaración.

Sintaxis Básica

La sintaxis básica para usar la propiedad border-right es la siguiente:

CSS
 
selector {
  border-right: <border-width> <border-style> <color>;
}

Donde:

  • <border-width>: Especifica el grosor del borde.
  • <border-style>: Define la apariencia del borde.
  • <color>: Establece el color del borde.

El orden de estos valores no importa. Puedes especificar uno, dos o los tres valores. Si solo se especifican algunos valores, los valores faltantes tomarán sus valores iniciales.

Valores de la Propiedad border-right

A continuación, se detallan los valores que puedes utilizar para cada componente de la propiedad border-right:

1. <border-width> (Ancho del Borde)

Puedes especificar el ancho del borde utilizando:

  • Valores de longitud: En unidades como píxeles (px), ems (em), rems (rem), etc.

    CSS
     
    .borde-ancho-px {
  border-right-width: 5px;
}

.borde-ancho-em {
  border-right-width: 0.3em;
}

  • Palabras clave:

    • thin: Un borde delgado.
    • medium: Un borde de grosor medio (valor predeterminado).
    • thick: Un borde grueso.
    CSS
     
    .borde-ancho-delgado {
  border-right-width: thin;
}

.borde-ancho-medio {
  border-right-width: medium;
}

.borde-ancho-grueso {
  border-right-width: thick;
}

2. <border-style> (Estilo del Borde)

Define la apariencia del borde. Algunos valores comunes incluyen:

  • none: Sin borde.

  • hidden: Similar a none, pero tiene un comportamiento diferente en el colapso de bordes de tablas.

  • dotted: Un borde punteado.

  • dashed: Un borde de guiones.

  • solid: Un borde de línea continua.

  • double: Un borde de doble línea.

  • groove: Un borde con apariencia de surco 3D.

  • ridge: Un borde con apariencia de cresta 3D.

  • inset: Un borde que hace que el contenido parezca estar incrustado.

  • outset: Un borde que hace que el contenido parezca sobresalir.

    CSS
     
    .borde-estilo-solido {
  border-right-style: solid;
}

.borde-estilo-punteado {
  border-right-style: dotted;
}

.borde-estilo-doble {
  border-right-style: double;
}

3. <color> (Color del Borde)

Especifica el color del borde. Puedes usar nombres de colores, valores hexadecimales, valores RGB, RGBA, HSL, HSLA, etc.

CSS
 
.borde-color-rojo {
  border-right-color: red;
}

.borde-color-hex {
  border-right-color: #007bff;
}

.borde-color-rgba {
  border-right-color: rgba(0, 123, 255, 0.7);
}

Propiedades Individuales Relacionadas

La propiedad border-right es una forma abreviada de establecer las siguientes propiedades individuales:

  • border-right-width: Establece el ancho del borde derecho.
  • border-right-style: Establece el estilo del borde derecho.
  • border-right-color: Establece el color del borde derecho.

Puedes usar border-right para establecer las tres propiedades a la vez, o usar las propiedades individuales para un control más granular.

Ejemplos Prácticos

Aquí tienes algunos ejemplos de cómo usar la propiedad border-right:

Ejemplo 1: Borde derecho sólido de 2 píxeles de color rojo

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-right: 2px solid red;
  }
</style>
</head>
<body>

  <div class="elemento">Este es un elemento con un borde derecho rojo.</div>

</body>
</html>

Ejemplo 2: Borde derecho punteado de grosor medio de color verde

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 250px;
    height: 80px;
    background-color: #e0e0e0;
    margin: 20px;
    border-right: medium dotted green;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde derecho punteado verde.</div>

</body>
</html>

Ejemplo 3: Borde derecho doble de 4 píxeles de color naranja

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 150px;
    height: 120px;
    background-color: #d0d0d0;
    margin: 20px;
    border-right: 4px double orange;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde derecho doble naranja.</div>

</body>
</html>

Ejemplo 4: Usando propiedades individuales

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    margin: 20px;
    border-right-width: thick;
    border-right-style: groove;
    border-right-color: purple;
  }
</style>
</head>
<body>

  <div class="elemento">Este elemento tiene un borde derecho con estilo groove y color púrpura.</div>

</body>
</html>

Casos de Uso Comunes

  • Crear líneas verticales para separar secciones de contenido (especialmente útil en diseños de derecha a izquierda).
  • Resaltar el final de un elemento o sección.
  • Indicar un estado o una acción completada en una interfaz de usuario.
  • Añadir un toque visual a los contenedores de contenido.

Compatibilidad del Navegador

La propiedad border-right es una de las propiedades CSS más fundamentales y tiene una excelente compatibilidad con todos los navegadores modernos y versiones anteriores.

Consideraciones

  • Para que un borde sea visible, debes especificar al menos un border-right-style (que no sea none o hidden) y un border-right-width mayor que cero. Si solo especificas un color sin estilo o ancho, el borde no se mostrará.
  • Si no especificas todos los valores en la propiedad abreviada border-right, los valores faltantes se establecerán en sus valores iniciales. Por ejemplo, si solo especificas border-right: 5px blue;, el border-right-style se establecerá en su valor inicial, que es none, y por lo tanto, no verás ningún borde. Debes incluir un estilo como solid, dashed, etc.

Conclusión

La propiedad border-right es una herramienta esencial en CSS para dar estilo al borde derecho de tus elementos HTML. Ya sea que necesites una simple línea divisoria o un borde con un estilo más elaborado, border-right te ofrece la flexibilidad para personalizar la apariencia de tus diseños web. Experimenta con diferentes valores para lograr el efecto visual deseado.