La Propiedad BORDER

La propiedad border en CSS es una propiedad abreviada que se utiliza para establecer el ancho, el estilo y el color de los cuatro bordes de un elemento HTML de una sola vez.

La propiedad border en CSS es una propiedad abreviada que se utiliza para establecer el ancho, el estilo y el color de los cuatro bordes de un elemento HTML de una sola vez. Es una herramienta fundamental para dar estructura visual y destacar elementos en tus páginas web.

Sintaxis Básica

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

CSS
 
selector {
  border: <ancho> <estilo> <color>;
}

Donde:

  • <ancho>: Especifica el grosor del borde. Puede ser una palabra clave (thin, medium, thick) o un valor en unidades de medida (píxeles px, ems em, etc.).
  • <estilo>: Define la apariencia del borde. Hay varios estilos disponibles (ver la sección de estilos más adelante).
  • <color>: Establece el color del borde. Puede ser un nombre de color (red, blue), un valor hexadecimal (#FF0000), un valor RGB (rgb(255, 0, 0)), etc.

El orden de los valores no importa, pero es una convención común seguir el orden: ancho, estilo, color.

Propiedades Individuales del Borde

La propiedad border es una abreviatura de las siguientes propiedades individuales:

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

Cuando utilizas la propiedad border, estás configurando estas tres propiedades simultáneamente.

Valores para la Propiedad border

Veamos con más detalle los valores que puedes usar para cada componente de la propiedad border:

1. <ancho> (border-width)

Puedes especificar el ancho del borde de las siguientes maneras:

  • Palabras clave:
    • thin: Un borde delgado.
    • medium: Un borde de grosor medio (valor predeterminado).
    • thick: Un borde grueso.
  • Unidades de medida: Puedes usar cualquier unidad de longitud CSS, como píxeles (px), ems (em), rems (rem), etc.

Ejemplo:

CSS
 
.borde-delgado { border: thin solid black; }
.borde-medio { border: medium dashed blue; }
.borde-grueso { border: thick dotted green; }
.borde-pixeles { border: 5px solid orange; }
.borde-ems { border: 0.2em solid purple; }

2. <estilo> (border-style)

Define la apariencia del borde. Los valores más comunes son:

  • none: No se muestra ningún borde. El ancho del borde es 0.
  • hidden: Similar a none, pero en conflictos de bordes de tabla, hidden tiene la prioridad más alta.
  • dotted: El borde se muestra como una serie de puntos.
  • dashed: El borde se muestra como una serie de guiones.
  • solid: El borde se muestra como una línea continua.
  • double: El borde se muestra como dos líneas sólidas paralelas. El ancho total es la suma del ancho de las dos líneas y el espacio entre ellas.
  • groove: El borde parece estar tallado en el lienzo. El efecto depende del color del borde.
  • ridge: El borde parece sobresalir del lienzo. El efecto también depende del color del borde.
  • inset: El contenido del elemento parece estar incrustado.
  • outset: El contenido del elemento parece sobresalir.

Ejemplo:

CSS
 
.borde-punteado { border: 2px dotted red; }
.borde-guiones { border: 3px dashed green; }
.borde-solido { border: 4px solid blue; }
.borde-doble { border: 5px double black; }
.borde-surco { border: 6px groove gray; }
.borde-cresta { border: 7px ridge silver; }
.borde-interno { border: 8px inset brown; }
.borde-externo { border: 9px outset olive; }

3. <color> (border-color)

Especifica el color del borde. Puedes usar cualquiera de los métodos para definir colores en CSS:

  • Nombres de colores (red, blue, teal, etc.).
  • Valores hexadecimales (#FF0000, #0000FF, #008080).
  • Valores RGB (rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 128, 128)).
  • Valores RGBA (rgba(255, 0, 0, 0.5) para rojo semi-transparente).
  • Valores HSL (hsl(0, 100%, 50%) para rojo).
  • Valores HSLA (hsla(0, 100%, 50%, 0.5) para rojo semi-transparente).

Ejemplo:

CSS
 
.borde-color-nombre { border: 2px solid red; }
.borde-color-hex { border: 3px dashed #00FF00; }
.borde-color-rgb { border: 4px dotted rgb(0, 0, 255); }

Ejemplo Completo

Aquí tienes un ejemplo HTML con varios elementos que utilizan diferentes estilos de borde:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .caja {
    width: 200px;
    height: 100px;
    margin: 10px;
    text-align: center;
    line-height: 100px;
  }

  .borde-solido { border: 2px solid black; }
  .borde-punteado { border: 3px dotted blue; }
  .borde-guiones { border: 4px dashed green; }
  .borde-doble { border: 5px double red; }
  .borde-grueso-azul { border: thick solid blue; }
</style>
</head>
<body>

  <div class="caja borde-solido">Borde Sólido</div>
  <div class="caja borde-punteado">Borde Punteado</div>
  <div class="caja borde-guiones">Borde de Guiones</div>
  <div class="caja borde-doble">Borde Doble</div>
  <div class="caja borde-grueso-azul">Borde Grueso Azul</div>

</body>
</html>

Establecer Bordes en Lados Individuales

Si deseas aplicar bordes solo a lados específicos de un elemento, puedes usar las siguientes propiedades:

  • border-top: Establece el borde superior.
  • border-right: Establece el borde derecho.
  • border-bottom: Establece el borde inferior.
  • border-left: Establece el borde izquierdo.

Cada una de estas propiedades también es una abreviatura para -width, -style y -color específicos del lado.

Ejemplo:

CSS
 
.borde-inferior-rojo { border-bottom: 5px solid red; }
.borde-superior-verde-punteado { border-top: 2px dotted green; }

También existen propiedades abreviadas específicas para cada lado, por ejemplo:

  • border-top-width, border-top-style, border-top-color
  • border-right-width, border-right-style, border-right-color
  • border-bottom-width, border-bottom-style, border-bottom-color
  • border-left-width, border-left-style, border-left-color1

Casos de Uso Comunes

  • Separar elementos: Utilizar bordes para distinguir visualmente diferentes secciones o componentes de una página.
  • Crear contenedores visuales: Enmarcar contenido para que parezca estar dentro de una caja.
  • Resaltar elementos importantes: Aplicar un borde a botones, imágenes u otros elementos para atraer la atención del usuario.
  • Añadir líneas decorativas: Usar bordes para crear líneas horizontales o verticales que mejoren la estética del diseño.

Consideraciones

  • El ancho del borde afecta el tamaño total del elemento. Un borde de 2px de ancho añadirá 2px al ancho y 2px a la altura del elemento (a menos que se ajuste el box-sizing).
  • El estilo none o hidden hará que el borde desaparezca, incluso si se han definido un ancho y un color.
  • Experimenta con diferentes estilos de borde para encontrar el que mejor se adapte a tu diseño.

Conclusión

La propiedad border es una herramienta esencial en CSS para dar forma y estructura visual a tus páginas web. Al comprender cómo combinar el ancho, el estilo y el color, puedes crear una amplia variedad de efectos de borde para mejorar la presentación de tus elementos HTML. ¡No dudes en practicar y explorar las diferentes opciones que ofrece esta propiedad!