Imágenes en los bordes CSS

Con CSS es posible especificar una imagen para ser usada como borde alrededor de un elemento HTML.

La propiedad border-image CSS

La propiedad border-image permite especificar una imagen para ser usada en lugar de un borde normal alrededor de un elemento HTML.

La propiedad border-image tiene tres partes:

• La imagen a usar como borde.
• Donde cortar la imagen.
• Definir si la sección de en medio debe repetirse o estirarse.

Usaremos la siguiente imagen llamada "imagen-borde.png":

 

La propiedad border-image toma la imagen y la divide en nueve secciones, como un tablero de 3x3. Entonces coloca las esquinas de la imagen en las esquinas del elemento HTML, las secciones de en medio es repetida o se estira según se especifique.

Nota: Para que la propiedad border-image funcione, el elemento HTML necesita que también se especifique la propiedad border.

En el siguiente ejemplo, la sección de en medio es repetida para para crear el borde:

#borde-imagen {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(imagen-borde.png) 30 round;
}

Mustra:

En el siguiente ejemplo, en la sección de en medio la imagen es estirada para crear el borde:

#borde-imagen {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(imagen-borde.png) 30 stretch;
}

Muestra: 

Nota: La propiedad border-image es una propiedad de "escritura taquigráfica" o "escritura corta" de las propiedades border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat.

Diferentes valores para la división

Diferentes valores para la división cambia la apariencia de un borde.

En el siguiente ejemplo, se establecen el valor 50 y round:

#borde-imagen {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(imagen-borde.png) 50 round;
}

Muestra 1:

En el siguiente ejemplo, se establecen el valor 20% con round:

#borde-imagen {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(imagen-borde.png) 20% round;
}

Muestra 2:

En el siguiente ejemplo, se establecen el valor 30% con round:

#borde-imagen {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(imagen-borde.png) 30% round;
}

Muestra 3:

Las propiedades para imágenes en los bordes CSS

Propiedad	Descripción
border-image	Una propiedad de escritura corta para especificar todos las propiedades border-image-*.
border-image-source	Especifica la ruta a la imagen a ser usada como borde.
border-image-slice	Especifica cortar la imagen usada para el borde.
border-image-width	Especifica el ancho de la imágen de borde.
border-image-outset	Especifica la cantidad en que el área de la imagen del borde se extiende más allá del recuadro de borde.
border-image-repeat	Especifica si la imagen de borde debe repetirse, redondearse o estirarse.