09Jul 2009 16 Comments */?>

Como redondear las esquinas de un DIV con jquery.corners

Categorías: JQuery, Tutoriales - Tags: ,

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.

rounded

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.

1
2
<script type="text/javascript" src="js/jquery-latest.js"></script>
<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:

1
2
3
4
5
6
7
<script type="text/javascript">
 
$(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 :

1
2
3
4
5
<div id="wrapper">
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
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):

1
$('.rounded').corners("8px transparent");

Pueden ver el ejemplo terminado en esta página.

Descargar Ejemplo

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:

1
<div id="cuadro2" class="rounded"><img  src="images/gatito.jpg"/></div>  Marco para foto redondo

El código CSS varia en cuanto a IE como Firefox

1
2
3
4
5
#cuadro2{
	padding:10px;
	background-color:#EEEEEE;
        border:1px solid #CCCCCC;  <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde
	}

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus