Bordes y contornos - parte 1

Propiedades border-width, border-style y border-color

Los bordes son elementos fundamentales en el diseño CSS que permiten definir líneas alrededor de los elementos HTML. Estas líneas pueden personalizarse en términos de grosor, estilo y color para crear diferentes efectos visuales y mejorar la estructura de la página.

Propiedad border-width

La propiedad border-width determina el grosor del borde. Podemos especificar este valor utilizando diferentes unidades de medida:

/* Valores con unidades específicas */
.box {
  border-width: 2px;      /* Píxeles (común) */
  border-width: 0.2em;    /* Relativo al tamaño de fuente */
  border-width: 0.2rem;   /* Relativo al tamaño de fuente del elemento raíz */
  border-width: 3pt;      /* Puntos */
}

También podemos usar valores predefinidos:

.box {
  border-width: thin;     /* Generalmente 1px */
  border-width: medium;   /* Generalmente 3px (valor por defecto) */
  border-width: thick;    /* Generalmente 5px */
}

Una característica importante de border-width es que permite definir diferentes grosores para cada lado del elemento:

/* Sintaxis con 4 valores: arriba, derecha, abajo, izquierda (sentido horario) */
.box {
  border-width: 1px 2px 3px 4px;
}

/* Sintaxis con 3 valores: arriba, (izquierda y derecha), abajo */
.box {
  border-width: 1px 2px 3px;
}

/* Sintaxis con 2 valores: (arriba y abajo), (izquierda y derecha) */
.box {
  border-width: 1px 2px;
}

También podemos definir el grosor para cada lado individualmente:

.box {
  border-top-width: 1px;
  border-right-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 4px;
}

Propiedad border-style

La propiedad border-style define el tipo de línea que se utilizará para el borde. Esta propiedad es obligatoria para que el borde sea visible, ya que el valor por defecto es none (sin borde).

Los valores más comunes son:

.box-1 {
  border-style: solid;    /* Línea continua (muy común) */
}

.box-2 {
  border-style: dashed;   /* Línea discontinua con guiones */
}

.box-3 {
  border-style: dotted;   /* Línea de puntos */
}

.box-4 {
  border-style: double;   /* Línea doble */
}

.box-5 {
  border-style: none;     /* Sin borde (valor por defecto) */
}

Otros valores menos utilizados pero disponibles:

.box {
  border-style: groove;   /* Efecto 3D de surco */
  border-style: ridge;    /* Efecto 3D de cresta */
  border-style: inset;    /* Efecto 3D hundido */
  border-style: outset;   /* Efecto 3D elevado */
  border-style: hidden;   /* Similar a none, pero gana en conflictos de bordes en tablas */
}

Al igual que con border-width, podemos aplicar diferentes estilos a cada lado:

/* Diferentes estilos para cada lado (arriba, derecha, abajo, izquierda) */
.box {
  border-style: solid dashed dotted double;
}

/* También podemos definir estilos individuales por lado */
.box {
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: double;
}

Propiedad border-color

La propiedad border-color define el color del borde. Podemos especificar colores de varias formas:

.box {
  /* Nombres de colores */
  border-color: red;
  
  /* Valores hexadecimales */
  border-color: #FF0000;  /* Formato largo */
  border-color: #F00;     /* Formato abreviado */
  
  /* RGB y RGBA (con transparencia) */
  border-color: rgb(255, 0, 0);
  border-color: rgba(255, 0, 0, 0.5);  /* 50% de transparencia */
  
  /* HSL y HSLA */
  border-color: hsl(0, 100%, 50%);
  border-color: hsla(0, 100%, 50%, 0.5);
}

Si no se específica un border-color, el borde tomará el color del texto del elemento (propiedad color).

También podemos definir colores diferentes para cada lado:

/* Diferentes colores para cada lado (arriba, derecha, abajo, izquierda) */
.box {
  border-color: red green blue yellow;
}

/* O individualmente */
.box {
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
}

Combinando las propiedades

Aunque podemos definir cada propiedad por separado, CSS nos permite combinarlas de forma más concisa:

/* Definiendo todas las propiedades a la vez con la propiedad abreviada border */
.box {
  border: 2px solid red;  /* width style color */
}

/* También podemos definir bordes específicos para cada lado */
.box {
  border-top: 1px dashed blue;
  border-right: 2px solid green;
  border-bottom: 3px dotted orange;
  border-left: 4px double purple;
}

Ejemplo práctico

Veamos un ejemplo completo que muestra diferentes combinaciones de estas propiedades:

.container {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.box-1 {
  padding: 15px;
  margin-bottom: 20px;
  background-color: white;
  border-width: 3px;
  border-style: solid;
  border-color: #3498db;
}

.box-2 {
  padding: 15px;
  margin-bottom: 20px;
  background-color: white;
  border: 2px dashed #e74c3c;
}

.box-3 {
  padding: 15px;
  background-color: white;
  border-top: 5px dotted #2ecc71;
  border-right: 2px solid #f1c40f;
  border-bottom: 4px double #9b59b6;
  border-left: 3px dashed #e67e22;
}

HTML correspondiente:

<div class="container">
  <div class="box-1">Borde sólido azul de 3px</div>
  <div class="box-2">Borde discontinuo rojo de 2px</div>
  <div class="box-3">Bordes diferentes en cada lado</div>
</div>

Este ejemplo crea tres cajas con diferentes estilos de borde:

1. La primera tiene un borde sólido azul de 3px en todos los lados
2. La segunda tiene un borde discontinuo rojo de 2px en todos los lados
3. La tercera tiene un borde diferente en cada lado (estilo, color y grosor)

Consideraciones importantes

• Si alguna de las propiedades (border-width, border-style o border-color) no se específica, se utilizará su valor por defecto.
• El border-style es obligatorio para que el borde sea visible, ya que su valor por defecto es none.
• Los bordes afectan al tamaño total del elemento según el modelo de caja que se esté utilizando (content-box o border-box).
• Para crear bordes más complejos o con efectos especiales, se pueden combinar estas propiedades con otras como box-shadow o utilizar múltiples elementos.

Dominar estas tres propiedades básicas de bordes te permitirá crear diseños más estructurados y visualmente atractivos en tus proyectos web.

Bordes redondeados con border-radius y valores individuales

Los bordes redondeados son un elemento de diseño muy popular en interfaces modernas que permiten suavizar las esquinas de los elementos HTML. CSS nos ofrece la propiedad border-radius para crear estos efectos de forma sencilla y flexible.

Uso básico de border-radius

La propiedad border-radius permite redondear las esquinas de un elemento especificando el radio de la curva. Cuanto mayor sea el valor, más redondeada será la esquina:

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border: 2px solid #2980b9;
  
  /* Redondea todas las esquinas con un radio de 10px */
  border-radius: 10px;
}

Podemos usar diferentes unidades de medida para definir el radio:

.box {
  /* Usando diferentes unidades */
  border-radius: 10px;      /* Píxeles (común) */
  border-radius: 1em;       /* Relativo al tamaño de fuente */
  border-radius: 10%;       /* Porcentaje del tamaño del elemento */
  border-radius: 0.5rem;    /* Relativo al tamaño de fuente del elemento raíz */
}

Valores individuales para cada esquina

Una de las características más utiles de border-radius es la posibilidad de especificar diferentes radios para cada esquina. El orden sigue el patrón de las agujas del reloj, comenzando por la esquina superior izquierda:

/* Sintaxis: superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda */
.box {
  border-radius: 10px 20px 30px 40px;
}

También podemos usar sintaxis abreviadas:

/* Dos valores: (superior-izquierda e inferior-derecha) (superior-derecha e inferior-izquierda) */
.box {
  border-radius: 10px 20px;
}

/* Tres valores: superior-izquierda, (superior-derecha e inferior-izquierda), inferior-derecha */
.box {
  border-radius: 10px 20px 30px;
}

Propiedades específicas para cada esquina

Si preferimos un enfoque más explícito, podemos usar propiedades individuales para cada esquina:

.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

Este enfoque es especialmente útil cuando necesitamos modificar una esquina específica en ciertos estados o mediante JavaScript.

Radios elípticos

Una característica menos conocida pero muy útil de border-radius es la posibilidad de crear esquinas elípticas especificando dos valores para cada radio (horizontal y vertical):

/* Sintaxis: horizontal/vertical */
.box {
  /* Todas las esquinas tendrán 20px horizontal y 10px vertical */
  border-radius: 20px/10px;
}

También podemos combinar radios elípticos con valores individuales para cada esquina:

/* Radios horizontales y verticales diferentes para cada esquina */
.box {
  /* Horizontal: 10px 20px 30px 40px / Vertical: 5px 10px 15px 20px */
  border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

Para las propiedades individuales, la sintaxis es:

.box {
  border-top-left-radius: 10px 5px;      /* horizontal vertical */
  border-top-right-radius: 20px 10px;
  border-bottom-right-radius: 30px 15px;
  border-bottom-left-radius: 40px 20px;
}

Casos de uso prácticos

1. Botones con esquinas redondeadas

Los botones con esquinas redondeadas son un elemento común en interfaces modernas:

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #2980b9;
}

2. Tarjetas con bordes redondeados

Las tarjetas con esquinas redondeadas son populares en diseños de tipo "card":

.card {
  width: 300px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

3. Imágenes redondeadas

Podemos aplicar border-radius a imágenes para crear diferentes efectos:

/* Imagen con esquinas ligeramente redondeadas */
.rounded-image {
  border-radius: 10px;
}

/* Imagen circular (funciona mejor con imágenes cuadradas) */
.circle-image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover; /* Mantiene la proporción de la imagen */
}

4. Pestañas con esquinas redondeadas superiores

Para crear pestañas con solo las esquinas superiores redondeadas:

.tab {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f1f1f1;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.tab.active {
  background-color: white;
  border-top: 2px solid #3498db;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: none;
}

5. Diseño con esquina única redondeada

Para crear diseños más creativos, podemos redondear solo una esquina:

.creative-box {
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
  /* Solo redondea la esquina superior derecha */
  border-top-right-radius: 30px;
}

Ejemplo completo

Veamos un ejemplo que muestra diferentes aplicaciones de border-radius:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background-color: #f5f5f5;
}

.box {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  text-align: center;
}

.box-1 {
  background-color: #3498db;
  border-radius: 10px;
}

.box-2 {
  background-color: #e74c3c;
  border-radius: 10px 30px;
}

.box-3 {
  background-color: #2ecc71;
  border-radius: 10px 30px 50px;
}

.box-4 {
  background-color: #f39c12;
  border-radius: 10px 30px 50px 70px;
}

.box-5 {
  background-color: #9b59b6;
  border-radius: 50%;
}

.box-6 {
  background-color: #1abc9c;
  border-radius: 30px/15px;
}

HTML correspondiente:

<div class="container">
  <div class="box box-1">Todas las esquinas iguales</div>
  <div class="box box-2">Dos valores</div>
  <div class="box box-3">Tres valores</div>
  <div class="box box-4">Cuatro valores</div>
  <div class="box box-5">Círculo (50%)</div>
  <div class="box box-6">Elíptico (30px/15px)</div>
</div>

Consideraciones importantes

• Cuando se aplica border-radius a un elemento con border, el borde sigue la curva definida por el radio.
• Para crear un círculo perfecto, el elemento debe ser cuadrado (mismo ancho y alto) y usar border-radius: 50%.
• Los valores de border-radius no deben ser excesivamente grandes para elementos pequeños, ya que pueden distorsionar la forma.
• En navegadores modernos, border-radius tiene buen soporte, pero en proyectos que requieran compatibilidad con navegadores muy antiguos, puede ser necesario usar prefijos como -webkit-border-radius o -moz-border-radius.
• Combinar border-radius con otras propiedades como overflow: hidden permite crear máscaras para contenido interno, como recortar imágenes en formas redondeadas.

La propiedad border-radius es una herramienta sencilla pero util que puede mejorar significativamente la estética de tus diseños web con muy poco código.