--- title: border-image slug: Web/CSS/border-image tags: - CSS - CSS Borders - CSS Property - Reference translation_of: Web/CSS/border-image ---
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 {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("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.
{{cssinfo}}
Etiquetado formal: {{csssyntax("border-image")}}
A continuación vea las respectivas propiedades para los diferentes valores.
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:
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:
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:
Especificación | Estado | Comentarios |
---|---|---|
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} |