Bordes y contornos - parte 2

Diferencias entre border y outline en el flujo del documento

Los bordes y los contornos son elementos visuales que pueden aplicarse a elementos HTML, pero funcionan de manera fundamentalmente diferente en cuanto a cómo afectan al flujo del documento y al espacio que ocupan los elementos.

Comportamiento básico

La principal diferencia entre border y outline radica en cómo interactúan con el modelo de caja y el flujo del documento:

• Border: Forma parte del modelo de caja estándar, ocupa espacio y afecta a las dimensiones totales del elemento.
• Outline: Se dibuja por encima del elemento sin afectar sus dimensiones ni el flujo del documento.

.box-with-border {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border: 5px solid #e74c3c;
  /* El tamaño total será 210px × 110px */
}

.box-with-outline {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  outline: 5px solid #e74c3c;
  /* El tamaño total seguirá siendo 200px × 100px */
}

Impacto en el flujo del documento

Esta diferencia fundamental tiene importantes implicaciones en el diseño:

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

.box {
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
  background-color: #3498db;
}

.box-with-border {
  border: 5px solid #e74c3c;
  /* Empuja otros elementos y puede causar desbordamiento */
}

.box-with-outline {
  outline: 5px solid #e74c3c;
  /* No empuja otros elementos ni causa desbordamiento */
}

En este ejemplo, el elemento con border ocupará más espacio y empujará los elementos siguientes, mientras que el elemento con outline mantendrá el flujo original del documento.

Características específicas de outline

La propiedad outline tiene algunas características únicas:

• No acepta radios redondeados: A diferencia de border, no se puede usar border-radius para redondear los contornos.
• No se puede aplicar a lados individuales: Mientras que con border podemos estilizar cada lado por separado, outline se aplica a todo el perímetro del elemento.
• Puede ser no rectangular: En algunos navegadores, outline sigue la forma exacta del elemento, incluso si no es rectangular.

/* Con border podemos estilizar cada lado individualmente */
.box-with-border {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 4px dotted green;
  border-left: 5px double orange;
}

/* Con outline no podemos hacer esto */
.box-with-outline {
  /* Esto no funciona como con border */
  outline-top: 2px solid red;      /* Propiedad no válida */
  outline-right: 3px dashed blue;  /* Propiedad no válida */
}

/* Outline se aplica a todo el perímetro */
.box-with-outline {
  outline: 3px solid purple;
}

Propiedad outline-offset

Una característica única de outline es la propiedad outline-offset, que permite crear un espacio entre el borde del elemento y su contorno:

.box {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  border: 2px solid #2980b9;
  outline: 3px dashed #e74c3c;
  outline-offset: 5px;  /* Crea un espacio de 5px entre el borde y el contorno */
}

Esta propiedad permite crear efectos visuales interesantes que no son posibles solo con border:

.focus-effect {
  border: 1px solid #ddd;
  transition: outline-offset 0.3s, outline-color 0.3s;
  outline: 2px solid transparent;
  outline-offset: 0;
}

.focus-effect:focus {
  outline-color: #3498db;
  outline-offset: 3px;
}

Casos de uso prácticos

Estas diferencias hacen que cada propiedad sea más adecuada para ciertos casos de uso:

Casos ideales para border

• Elementos con dimensiones precisas: Cuando necesitas controlar exactamente el tamaño total del elemento.
• Diseños con bordes decorativos: Cuando el borde es parte integral del diseño visual.
• Elementos con esquinas redondeadas: Cuando necesitas aplicar border-radius.

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

Casos ideales para outline

• Indicadores de foco: Para mostrar qué elemento tiene el foco sin alterar el layout.
• Destacar elementos temporalmente: Cuando quieres resaltar un elemento sin mover otros.
• Depuración de layouts: Para visualizar elementos sin afectar su posicionamiento.

/* Estilo de foco personalizado */
button:focus {
  outline: 3px solid #3498db;
  outline-offset: 2px;
}

/* Destacar un elemento al pasar el ratón sin afectar el layout */
.highlight-on-hover:hover {
  outline: 2px dashed #e74c3c;
}

/* Depuración de layouts */
.debug-layout * {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

Comportamiento con box-sizing

La propiedad box-sizing afecta a border pero no a outline:

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
}

.content-box {
  box-sizing: content-box;
  border: 10px solid #3498db;
  /* Tamaño total: 260px × 160px (width + padding*2 + border*2) */
}

.border-box {
  box-sizing: border-box;
  border: 10px solid #3498db;
  /* Tamaño total: 200px × 100px (border y padding se incluyen dentro) */
}

.with-outline {
  box-sizing: border-box;
  border: 5px solid #3498db;
  outline: 10px solid #e74c3c;
  /* El outline no afecta al tamaño independientemente del box-sizing */
}

Ejemplo comparativo completo

Veamos un ejemplo que muestra claramente las diferencias entre border y outline:

.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 400px;
  padding: 20px;
  background-color: #f5f5f5;
}

.row {
  display: flex;
  gap: 20px;
}

.box {
  width: 150px;
  height: 80px;
  background-color: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.with-border {
  border: 10px solid #e74c3c;
}

.with-outline {
  outline: 10px solid #e74c3c;
}

.with-both {
  border: 5px solid #2ecc71;
  outline: 10px solid #e74c3c;
  outline-offset: 5px;
}

HTML correspondiente:

<div class="container">
  <div class="row">
    <div class="box">Normal</div>
    <div class="box with-border">Con border</div>
  </div>
  <div class="row">
    <div class="box with-outline">Con outline</div>
    <div class="box with-both">Border + outline</div>
  </div>
</div>

Consideraciones de accesibilidad

El uso de outline tiene importantes implicaciones para la accesibilidad:

• Los navegadores utilizan outline para mostrar el foco en elementos interactivos.
• Eliminar completamente el outline (outline: none) sin proporcionar una alternativa visible puede crear problemas de accesibilidad para usuarios que navegan con teclado.

/* Antipatrón de accesibilidad */
button:focus {
  outline: none; /* Elimina la indicación visual de foco */
}

/* Mejor enfoque: personalizar en lugar de eliminar */
button:focus {
  outline: 3px solid #3498db;
  outline-offset: 2px;
}

Soporte en navegadores

Tanto border como outline tienen buen soporte en navegadores modernos, pero hay algunas diferencias:

• border tiene soporte universal y consistente.
• outline puede comportarse ligeramente diferente entre navegadores, especialmente con formas no rectangulares.
• outline-offset tiene buen soporte en navegadores modernos, pero puede requerir prefijos en navegadores más antiguos.

Rendimiento

En términos de rendimiento:

• border puede desencadenar recálculos de layout cuando cambia, ya que afecta al tamaño y posición de los elementos.
• outline generalmente tiene mejor rendimiento en animaciones y cambios dinámicos, ya que no provoca recálculos de layout.

/* Puede causar reflow (recálculo de layout) */
@keyframes animate-border {
  0% { border-width: 1px; }
  100% { border-width: 10px; }
}

/* No causa reflow, mejor rendimiento */
@keyframes animate-outline {
  0% { outline-width: 1px; }
  100% { outline-width: 10px; }
}

Entender estas diferencias fundamentales entre border y outline te permitirá elegir la propiedad más adecuada según tus necesidades específicas de diseño, rendimiento y accesibilidad.

Bordes con imágenes usando border-image

La propiedad border-image permite utilizar imágenes como bordes de elementos HTML, ofreciendo posibilidades de diseño mucho más creativas que los bordes tradicionales. Esta característica nos permite crear bordes decorativos, patrones complejos y efectos visuales únicos que serían imposibles de lograr con las propiedades básicas de bordes.

Estructura básica de border-image

La propiedad border-image es una propiedad abreviada que engloba varias subpropiedades relacionadas con la aplicación de imágenes como bordes:

.box {
  border: 15px solid transparent; /* Necesario para definir el ancho del borde */
  border-image: source slice width outset repeat;
}

Veamos cada componente en detalle:

1. border-image-source

Esta propiedad define la imagen que se utilizará como borde. Puede ser una URL a un archivo de imagen o un gradiente:

.box {
  border: 15px solid transparent;
  border-image-source: url('border-pattern.png');
}

/* También podemos usar gradientes */
.box-gradient {
  border: 15px solid transparent;
  border-image-source: linear-gradient(to right, red, blue);
}

2. border-image-slice

La propiedad border-image-slice divide la imagen en nueve secciones (como una cuadrícula 3x3), definiendo cómo se cortará la imagen para aplicarla al borde:

.box {
  border: 15px solid transparent;
  border-image-source: url('border-pattern.png');
  border-image-slice: 27; /* Un solo valor aplica a los cuatro lados */
}

Podemos especificar valores diferentes para cada lado:

/* Orden: superior, derecha, inferior, izquierda */
.box {
  border-image-slice: 27 27 27 27;
}

/* Versión abreviada con 2 valores: (superior e inferior) (izquierda y derecha) */
.box {
  border-image-slice: 27 27;
}

Los valores pueden ser números (sin unidades) o porcentajes:

.box {
  border-image-slice: 30%; /* 30% de la imagen desde cada borde */
}

También podemos añadir la palabra clave fill para que la imagen central se use como fondo:

.box {
  border-image-slice: 27 fill;
}

3. border-image-width

Esta propiedad define el ancho de la imagen del borde. Si no se específica, toma el valor de border-width:

.box {
  border: 15px solid transparent;
  border-image-source: url('border-pattern.png');
  border-image-slice: 27;
  border-image-width: 20px; /* Ancho del borde de imagen */
}

También podemos usar valores relativos:

.box {
  border-image-width: 1; /* 1 vez el ancho del borde */
  border-image-width: 2.5; /* 2.5 veces el ancho del borde */
  border-image-width: auto; /* Usa el valor de border-image-slice */
}

4. border-image-outset

Esta propiedad define cuánto debe extenderse la imagen del borde más allá del borde del elemento:

.box {
  border: 15px solid transparent;
  border-image-source: url('border-pattern.png');
  border-image-slice: 27;
  border-image-outset: 10px; /* La imagen se extiende 10px más allá del borde */
}

5. border-image-repeat

Esta propiedad define cómo se repite la imagen para cubrir el borde:

.box {
  border-image-repeat: stretch; /* Estira la imagen (valor por defecto) */
}

.box-2 {
  border-image-repeat: repeat; /* Repite la imagen, puede cortarla */
}

.box-3 {
  border-image-repeat: round; /* Repite la imagen, ajustando su tamaño para evitar cortes */
}

.box-4 {
  border-image-repeat: space; /* Repite la imagen, añadiendo espacio entre repeticiones */
}

También podemos especificar valores diferentes para los ejes horizontal y vertical:

.box {
  border-image-repeat: round stretch; /* round para horizontal, stretch para vertical */
}

Sintaxis abreviada

La forma más común de usar border-image es con la sintaxis abreviada:

.box {
  border: 15px solid transparent;
  border-image: url('border-pattern.png') 27 / 20px / 10px round;
  /* source slice / width / outset repeat */
}

Si omitimos algún valor, se utilizará el valor por defecto:

.box {
  border: 15px solid transparent;
  border-image: url('border-pattern.png') 27 round;
  /* Omitimos width y outset */
}

Ejemplos prácticos

1. Borde decorativo simple

.decorative-box {
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #f9f9f9;
  border: 20px solid transparent;
  border-image: url('ornamental-border.png') 30 round;
}

2. Borde con gradiente

.gradient-border-box {
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: white;
  border: 15px solid transparent;
  border-image: linear-gradient(45deg, #f06, #9f6, #06f, #f06) 1 stretch;
}

3. Borde con esquinas personalizadas

.corner-box {
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 30px solid transparent;
  border-image: url('corner-pattern.png') 30 30 round;
}

4. Tarjeta con marco fotográfico

.photo-frame {
  width: 300px;
  padding: 5px;
  background-color: white;
  border: 25px solid transparent;
  border-image: url('frame-pattern.png') 50 fill / 25px / 0 stretch;
}

.photo-frame img {
  width: 100%;
  display: block;
}

HTML correspondiente:

<div class="photo-frame">
  <img src="landscape.jpg" alt="Paisaje">
</div>

Creando imágenes de borde efectivas

Para crear bordes con imágenes efectivos, es importante entender cómo diseñar la imagen original:

1. Imágenes para bordes continuos: Deben ser diseñadas para que se repitan sin costuras visibles.

2. Imágenes para esquinas: Las esquinas deben ser diseñadas cuidadosamente para que se conecten bien con los bordes laterales.

3. Formato de archivo: Utiliza PNG para imágenes con transparencia o SVG para bordes escalables.

4. Tamaño: La imagen debe tener suficiente resolución para verse bien incluso cuando se estira.

Ejemplo de estructura de imagen para border-image

Una imagen ideal para border-image suele tener esta estructura:

+-------+-------------+-------+
|       |             |       |
|   1   |      2      |   3   |
|       |             |       |
+-------+-------------+-------+
|       |             |       |
|   4   |      5      |   6   |
|       |             |       |
+-------+-------------+-------+
|       |             |       |
|   7   |      8      |   9   |
|       |             |       |
+-------+-------------+-------+

Donde:

• Las secciones 1, 3, 7 y 9 son las esquinas
• Las secciones 2, 4, 6 y 8 son los bordes
• La sección 5 es el centro (usado solo con fill)

Compatibilidad y consideraciones

• Navegadores antiguos: Algunos navegadores antiguos pueden requerir prefijos como -webkit-border-image o -moz-border-image.

• Fallback: Siempre es buena práctica proporcionar un border normal como fallback:

.box {
  /* Fallback para navegadores que no soportan border-image */
  border: 15px solid #ddd;
  
  /* Versión con border-image */
  border-image: url('border-pattern.png') 27 round;
}

• Rendimiento: Las imágenes grandes pueden afectar al rendimiento, especialmente en dispositivos móviles. Optimiza tus imágenes y considera usar SVG para bordes escalables.

• Responsive: Ten en cuenta que los bordes con imágenes pueden no escalar bien en diseños responsivos. Prueba tu diseño en diferentes tamaños de pantalla.

Ejemplo completo

Veamos un ejemplo completo que muestra diferentes aplicaciones de border-image:

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

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

.simple-border {
  border: 15px solid transparent;
  border-image: url('simple-border.png') 30 round;
}

.gradient-border {
  border: 10px solid transparent;
  border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
}

.fancy-corners {
  border: 30px solid transparent;
  border-image: url('corner-border.png') 30 30 / 30px round;
}

.fill-center {
  border: 20px solid transparent;
  border-image: url('pattern-border.png') 30 fill / 20px round;
}

HTML correspondiente:

<div class="container">
  <div class="box simple-border">Borde simple con imagen</div>
  <div class="box gradient-border">Borde con gradiente</div>
  <div class="box fancy-corners">Esquinas decorativas</div>
  <div class="box fill-center">Con relleno central</div>
</div>

Casos de uso recomendados

border-image es especialmente útil para:

• Diseños temáticos: Bordes personalizados para sitios web con temas específicos (vintage, infantil, festivo).
• Marcos decorativos: Para enmarcar imágenes, certificados o contenido destacado.
• Botones y elementos UI: Para crear botones con estilos únicos y personalizados.
• Tarjetas y contenedores: Para añadir personalidad a tarjetas de producto o contenedores de información.

La propiedad border-image ofrece posibilidades creativas que van mucho más allá de los bordes tradicionales, permitiéndote crear diseños únicos y personalizados que destacarán en tus proyectos web.