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

 

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 3,00 de 5)
Cargando…
Comparte en las redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre