Hace RATO no colaboro con el foro y esta vez quise hacer algo sencillo, pero muy util y "eye candy" a la hora de un buen diseño web basado en estándares web con CSS y jQuery.
Se trata del Plugin jQuery Corners, un plugin muy fácil de usar para el redondeo de esquinas muy all estilo
-moz-border-radius para Firefox o
-webkit-border- radius para Safari, la ventaja de este plugin es que es funcional 100% en iPhone, Chrome, Firefox, Safari 2+, Opera 9.0+, Internet Explorer 6+ y probablemente más...
Nuestro Markup:
Yo hago el ejemplo con un DOCTYPE Transitional (Solo a título ilustrativo)
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>
<--! Tu contenido aqui -->
</body>
</html>
Lo más importante para que nuestro plugin funcione es la llamada que debemos hacer a las librerías, para ello debemos descargar
jQuery y el Plugin
jQuery.Corners, luego llamarlos desde nuestro código y nos quedaría de la siguente forma:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.2.6.js"</script>
<script type="text/javascript" src="js/jquery.corners.js"</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>
<--! Nuestros DIV's aqui -->
</body>
</html>
Ahora aplicamos jQuery a las clases que queramos redondear, por ejemplo:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.2.6.js"</script>
<script type="text/javascript" src="js/jquery.corners.js"</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>
<div style="background-color:#acc; padding:5px" class="redondear">
Bordes redondeados con jQuery
</div>
<script>$(document).ready( function(){
$('.redondear').corners();
});</script>
</body>
</html>
Esto quedaria de la siguiente forma
EJEMPLO 1
Peeero, podemos jugar un poco con el código (Gracias a Dios existe jQuery y CSS) y podemos lograr excelentes bordes con fondos increíbles y totalmente accesibles por los navegadores.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.2.6.js"</script>
<script type="text/javascript" src="js/jquery.corners.js"</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>
<div style="background-color:#acc; background-image: url(images/bg.jpg); background-repeat: repeat-x; padding:5px" class="redondear">
Bordes redondeados con jQuery
</div>
<script>$(document).ready( function(){
$('.redondear').corners("15px");
});</script>
</body>
</html>
Esto quedaría así
EJEMPLO 2
Fijense que la imagen de fondo es un simple estilo que le aplique a unos cuantos píxeles en Photoshop
imagen 
Para mayor información pueden visitar el siguiente sitio con tutoriales de como usar
jQuery.Corners (en inglés).
Ojala les sea de utilidad,
Saludos.
Actualización: Corrección de errores no se en que estaba pensando jeje... gracias!