Característica border-image en CSS

La propiedad border-image en CSS permite dibujar una imagen en el marco de un elemento, lo que facilita la creación de elementos con una apariencia personalizada. La propiedad se utilizará en border-image lugar de las formas del marco que se pueden definir a través de la propiedad border-style.

Funciones border-image css

Valor inicial	Para cada valor corto: `border-image-source`: `none` `border-image-slice`: `100%` `border-image-width`: `1` `border-image-outset`: `0` `border-image-repeat`: `stretch`
Aplicado a	Todos los elementos excepto los elementos de tabla interiores en el que la propiedad se establece `border-collapse` a `collapse`.
Heredable	No
Móvil	No
Valor calculado	Para cada valor corto: `border-image-source`: Valor `none`, o el URI de la imagen se convertirá en un enlace absoluto. `border-image-slice`: Uno, dos, tres o cuatro valores que son longitudes absolutas o porcentajes, además de la palabra reservada `fill`. `border-image-width`: Cómo se especifica, pero con longitudes relativas convertidas a absolutas. `border-image-outset`: Como se especifica, pero con longitudes relativas convertidas a absolutas. `border-image-repeat`: Como se especificó.

/* image-source | height | width | repeat */
border-image: url("/images/border.png") 30 30 repeat;
border-image: url("/images/border.png") 30 30 stretch;

Ejemplos y aplicaciones

Usando una foto para enmarcar. Un ejemplo del uso de una imagen de figuras rojas en las cuatro esquinas, y los bordes de otro color, y el resto de la imagen es transparente.

Código HTML:

< div  class = "bitmap-border" > La imagen se estirará para llenar el marco. </ div >

Código CSS:

.bitmap-border { 
  padding: 15px;
  border: double red 1em;
  border-image: url("border.png") 27 round stretch;
}

Usando un degradado de color. Un ejemplo de cómo utilizar un degradado de color.

Código HTML:

< div  class = "gradient-border" > Un degradado llenará el área del marco. </ div >

Código CSS:

.gradient-border {
  padding: 20px;
  border: 20px solid;
  border-image: linear-gradient(#205a23, #28832c) 10;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	15	15	11	15	6

Características generales

Para obtener información adicional acerca de los valores de esta propiedad acepta, ver el border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat.

Estructura

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | 
/ <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>;

Vea también

Propiedades de página tomadas por la propiedad de acceso directo border-image: el border-image-source, border-image-slice, border-image-width, border-image-outset y border-image-repeat.
La página de propiedades establecido por la propiedad de acceso directo border: border-width, border-style, y border-color.
Utilice una imagen como fondo de pantalla a través de la función background-image.
Utilice el elemento <img> para agregar imágenes a su documento.