CSS 3 tiene la propiedad border-radius
que permite crear bordes redondeados sin imágenes, sin embargo, esta propiedad tiene la limitante de que si se aplica a un elemento que contiene una imagen, no puede darle a esta, bordes redondeados.
Solución
En Web Designer Wall plantean una solución con jQuery y usando border-radius
. La solución consiste en agregar el siguiente script al header
de la página:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rounded-img, .rounded-img2").load(function() {
$(this).wrap(function(){
return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
});
$(this).css("opacity","0");
});
});
</script>
Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img
o rounded-img2
. Ejemplo:
<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />
Y por último, se definen estas clases CSS en el header
del documento o el archivo de estilos:
.rounded-img {
display: inline-block;
border: solid 1px #000;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}
Explicación
La propiedad border-radius
no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.
El script oculta la imagen (con opacity:0
) y la envuelve con un elemento <span>
que tiene a la misma imagen como fondo.
Conclusión
Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.
roy agosto 12, 2010 a las 10:31 pm
pero eso solo sirve para firefox chrome y safari, no ie ni el ie7 u 8 eso es lo malo, ya lo intente…. buena tu nota
Responderjfspider septiembre 6, 2011 a las 4:45 pm
Es cierto no funciona mas q en firefox, como podria hacer que funcione en xplorer, o chrome==???
ResponderDaniel junio 24, 2012 a las 1:57 pm
Gracias !. Muy útil el post 😉
Saludos.
Daniel.
ResponderDiario de Mierda octubre 8, 2012 a las 6:11 pm
Buen script. Aunque un abuso satura mucho la carga de la web.
Respondercecilia febrero 28, 2013 a las 1:25 pm
Ingeniosa solucion, sin embargo -al menos ahor-a el atributo border-radius puede aplicarse directamente sobre una imagen, el único que no lo acepta (al menos en lo que yo pude comprobar, es safari -en la versión 3.0 seguro no lo toma, no se las mas avanzadas-) ni aún usando webkit
Responderruben noviembre 28, 2013 a las 2:39 pm
muchas gracias me has ayudado un montón, me estaba
Respondervolviendo loco.
loogier junio 29, 2015 a las 6:37 pm
Gracias viejo, funciona perfecto…
Responder