En CSS3 con la propiedad
border-image.
Para obtener gradientes sin usar imágenes, en CSS hay
linear-gradient,
radial-gradient. Algunos navegadores incluyen sus propias propiedades (
-webkit-gradient, -moz-border-image).
En versiones anteriores de CSS no se puede asignar una imagen de fondo a un borde. Hay alternativas para emular bordes con imágenes, tanto mediante CSS como mediante javascript o el uso de frameworks javascript como JQuery.
Anidar dos elementos, el interior tendrá el contenido principal, y el elemento exterior con un padding dejará ver la imagen de fondo (en lugar de padding en el elemento exterior se podría usar margin en el elemento interior).
Código CSS:
Ver original.imgborde{padding:10px; background-image:url(imagen.gif);}
.contenido{background-color:white;}
O con un sólo elemento(aunque la imagen se verá debajo del contenido, puede servir para crear el efecto de hoja con bordes quemados, o si tiene el centro transparente a de un color sólido como puede ser el blanco no molestará si el contenido es texto):
Código CSS:
Ver original.imgborde2{padding:10px; background-image:url(imagen.gif);}
En estos ejemplos, no probados, puede ser necesario especificar las medidas (height, width) de los elementos. También se puede ajustar el padding o margin para que se vea en todos los bordes, o sólo en los que se quiera (derecho, izquierdo, superior, inferior), usar repeat, etc, según como sea la imagen que se quiere poner de fondo.
CSS Image Frames Style Tutorial Unique CSS Borders – Boring borders step aside Bonita técnica para lograr fondos desvanecidos o degradados