border-image

Resumen

La propiedad de CSS   border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

La propiedad border-image es usada en lugar de la sentencia border-style. Por eso es muy importante tener en cuenta el valor dado por la sentencia border-image-source, que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

• Valor inicial the concatenation of the initial values of its longhand properties:
  • border-image-source: none
  • border-image-slice: 100%
  • border-image-width: 1
  • border-image-outset: 0s
  • border-image-repeat: stretch
• Applies to as each of the properties of the shorthand:
  • border-image-outset: all elements, except internal table elements when border-collapse is collapse
  • border-image-repeat: all elements, except internal table elements when border-collapse is collapse
  • border-image-slice: all elements, except internal table elements when border-collapse is collapse
  • border-image-source: all elements, except internal table elements when border-collapse is collapse
  • border-image-width: all elements, except table elements when border-collapse is collapse
  . It also applies to ::first-letter.
• Heredable no
• Percentages The values of its longhand properties the percentage value belongs to:
  • border-image-slice: refer to the size of the border image
  • border-image-width: refer to the width or height of the border image area
• Media visual
• Valor calculado as each of the properties of the shorthand:
  • border-image-outset: all lengths made absolute, otherwise as specified
  • border-image-repeat: as specified
  • border-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specified
  • border-image-source: none or the image with its URI made absolute
  • border-image-width: all lengths made absolute, otherwise as specified
• Animatable no
• Canonical order the unique non-ambiguous order defined by the formal grammar

Sintaxis

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

Valores

A continuación vea las respectivas propiedades para los diferentes valores.

Ejemplos

Bitmap repeated (repeat)

La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 repeat;
}

Resultado:

Bitmap repeated (round)

La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 round;
}

Resultado:

Bitmap stretched

La opción 'stretch' estira la imágen para rellenar todo el borde del área

.example { 
  border: 30px solid transparent;
  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
  border-image:url("/files/4127/border.png") 30 30 stretch;
}

Resultado:

Especificaciones

Compatibilidad de navegadores

• [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
• [2] For Opera, the prefixed property was added after the non-prefixed.

Véase también:

• border-image related CSS properties: border-image, border-image-source, border-image-width, border-image-slice, border-image-repeat, border-image-outset