Como redondear las esquinas de un DIV con jquery.corners
Publicado en July 9, 2009 by Damian
Si hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.
Hay infinidad de plugins que cumplen esta función pero a mi el que más me gusta es JQuery Corners.
Para utilizarlo como siempre debemos utilizar la ultima version de JQuery y del plugin.
<script type="text/javascript" src="js/jquery.corners.js"></script>
Con esto tendriamos el plugin cargado. En este ejemplo voy a hacer que tanto el div como la foto tengan tengan la clase “rounded” por lo que para aplicar el plugin hago lo siguiente:
$(document).ready(function(){
//espero que cargue el DOM y aplico el plugin a todos los elemento con clase rounded
$('.rounded').corners();
});
</script>
Tan solo nos quedaria añadir el código HTML :
<div id="cuadro1" class="rounded"> Div con gif degradado de fondo </div>
<img id="cuadro2" class="rounded" src="images/gatito.jpg"/> Marco para foto redondo
</div>
Y aplicarle un estilo:
body {
color:#666666;
font-family:'Trebuchet MS',sans-serif;
font-size:14px;
line-height:1.5em;
text-align:justify;
}
#cuadro1{
background:#D7E9F3 url(images/intro2.gif) repeat-x scroll left top;
margin-bottom:50px;
padding:30px 80px;
}
#cuadro2{
padding:10px;
background-color:#EEEEEE;
border:1px solid #CCCCCC;
margin-right:50px;
}
#wrapper{
width:370px;
margin:0 auto;
}
</style>
Otra cosa a tener en cuenta es que podemos pasarle opciones como por ejemplo un radio de 8px y que sea transparente (en caso de tener imagenes o hover states):
Pueden ver el ejemplo terminado en esta página.
ACTUALIZACIÓN
Como menciona Jereny en IE no redondea las imágenes. Si quieren hacer un marco para la imagen redondeado lo pueden hacer de la siguiente forma:
El código CSS varia en cuanto a IE como Firefox
padding:10px;
background-color:#EEEEEE;
border:1px solid #CCCCCC; <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde
}
Links Sponsors
Tags: jquery.plugin, tutorial jquery
Categoría: JQuery, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.
[...] toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog. [...]
Hola,
Gracias por la info. Hay alguna manera para poner borde a un div y que se redonde? Es que en IE no se redondea bien
Saludos!
Jonijnm , a mi si me funciona bien con IE , El borde del div lo haces con CSS , el plugin solo se encarga de redondearlo.
Buen posta me sirvio bastante , gracias por el aporte, espero postees mas cosas sobre jquery….
Un abrazo hasta pronto
Hola como estan… muy buena info, pero mi pregunta es que si lo podemos aplicar en los form, input, select, botones… Si se puede como seria? y si no? alguna otro plugin o ayuda
Felicitaciones y saludos
En este compilado tenes 4 o 5 plugins más para redondear esquinas. Te recomiendo el primero , que es de malsup
Tengoun inconveniente estoy rediseñando en website pero el problema con el squery.corner (o al menos mi problema) es que tengo un fondo de pagina o de div contenedor que tiene una imagen que no es de un solo color esu ndegrade especial entonces cuando coloco el div a redondear las esquinas me aparecen de otro color, negro, azul dependiendo del color que yo le ponga pero no se como ponerle transparente para que tome el color del div contenedor, sino me queda mal porque el fondo no es un color definido es una imagen en psd me explico??? he probado con el transparent pero no me funciono alquien podria explicarme como se hace paraque las esquinas que sobran del redondeo me tome la imagen del div contenedor
Hola Damian,
Como dice JoniJnm, en IE7 no se redondean las esquinas de los div, de hecho, acceso al ejemplo que colocas en esta pagina: “Pueden ver el ejemplo terminado en esta página.” desde IE7 y no se redondean las esquinas de la imagen del gato.
Saludos!
Tienen ustedes razon, se me paso por alto. Una solucion seria incluir la foto dentro del div y redondearlo. El unico problema es que en IE si ponemos borde no se redondea. Ahora actualizo el post
Hola! Ya estuve probando en varias ocasiones con wordpress y no me funcional. Sin embargo cuando lo simulo en un html sin php, me va bien.
He probado en 2 distintas copias de wordpress.
el source de jquery he puesto con
/js/..
tu has probado ponerlo en un blog? lo que veo aqui es una imagen tomada de pantalla.
doy las gracias por exponer este tutotial!
me refiero que el source esta puesto con el codigo phpphp bloginfo(‘template_directory’)