border-image

Índice

Definición de .border-image utilizado en CSS

.border-image es una propiedad abreviada que le permite usar un gradiente de imagen o CSS como el borde de un elemento.

Caso de empleo de border-image

Si te gustaría emplear esta propiedad de CSS en tu stylesheet, hazlo de la siguiente manera:

.element {
  border-image: url(border.png) 25 25 round;
}

Otro ejemplo más avanzado de .border-image es el siguiente de CODEPEN:

Sintaxis de .border-image en CSS

border-image: source slice width outset repeat|initial|inherit;

Valores

Valor Descripción Manifestación
La ruta a la imagen que se utilizará como borde.
Cómo cortar la imagen del borde
El ancho de la imagen del borde.
La cantidad en la que el área de la imagen del borde se extiende más allá del cuadro del borde
Si la imagen del borde debe repetirse, redondearse o estirarse
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .border-image

Los números de la tabla detallan la primera versión del navegador que es absolutamente compatible con la propiedad.

Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5

Referencias técnicas

Echa un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso