Característica border-image-source en CSS

Característica border-image-source en CSS

La propiedad border-image-source CSS define una imagen <image> que se utilizará en lugar del marco y, si esta propiedad se establece en none, se utiliza la forma definida en la propiedad border-style.

Funciones border-image-source css

Valor inicialnone
Aplicado aTodos los artículos.
HeredableNo
MóvilNo
Valor calculadonone, o el URI de la imagen se convertirá en un enlace absoluto.
/* Sin imagen de marco */ 
border-image-source :  none;
/* Especifica la ruta de la imagen que se mostrará en el marco */ 
border-image-source :  url ( image.jpg );
/* Usa un degradado */ 
border-image-source: linear-gradient(to top, red, yellow);
/* valores globales */ 
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

Nota: Es cierto que <image> se puede usar cualquier tipo de valor con esta propiedad, pero la compatibilidad con el navegador sigue siendo limitada y algunos navegadores solo admiten imágenes definidas a través de url()‎.

Ejemplos y aplicaciones

Consulte la página border-image para ver ejemplos del comportamiento de diferentes valores.

Soporte de navegadores

CaracterísticaChromeFirefoxIEÓperaSafari
Soporte básico15.015.011156

Características generales

La propiedad acepta border-image-source uno de los siguientes valores:

none

Especifica que no se debe usar una imagen con el marco, sino con la forma definida en la propiedad border-style.

<image>

Una referencia a una imagen que se utilizará en el marco.

Estructura border-image-source css

border-image-source: none | <image>;

Vea también

  • La página de propiedades establecido por la propiedad de acceso directo border-imageborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat.
  • La página de propiedades establecido por la propiedad de acceso directo borderborder-widthborder-styleborder-color.