Tutorial CSS: Bordes y contornos

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 especifica 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 especifica, 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 potentes 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 potente que puede mejorar significativamente la estética de tus diseños web con muy poco código.

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 3×3), 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 especifica, 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.