CSS3 Border Image

El atributo border-image es un atributo que nos ayuda a aplicar nuevos estilos a los contenedores con CSS, a través de la utilización de imágenes en los bordes de los elementos, incluso pudiendo escoger varias imágenes para varias de las partes de los bordes.

Colocar imágenes en los bordes es una tarea que ya se suele realizar en el diseño web, y para ello se suelen utilizar complementariamente técnicas con los lenguajes HTML y CSS. Es decir, para que un elemento de la página, como puede ser un contenedor o una tabla, párrafo, etc., tenga un borde a partir de una imagen, se necesita colocar algún código HTML adicional, con algún contenedor que nos permita luego definir estilos CSS para «imitar» ese borde de imagen. En cualquier caso, estemos o no familiarizados con las técnicas de uso de imágenes en los bordes, lo importante es que con CSS 3 vamos a poder hacer eso mismo simplemente escribiendo algunos nuevos atributos a los elementos que deseemos.

Como por ejemplo:

div {
    border-style: solid; border-width: 180px 222px 198px 211px; 
    -moz-border-image: url(border5.jpg) 180 222 198 211 repeat; 
    -webkit-border-image: url(border5.jpg) 180 222 198 211 repeat; 
    -o-border-image: url(border5.jpg) 180 222 198 211 repeat; 
    border-image: url(border5.jpg) 180 222 198 211 fill repeat;
}

Ver ejemplo en funcionamiento

Border Image Generator