Bordes redondeados con jQuery sin imágenes

Artículo escrito por Diseño Web Coruña Martín Iglesias

Bordes redondeados con jQuery sin imágenes

Bordes redondeados con jQuery sin imágenes

13 de Julio de 2009 18,167 veces Ver comentarios

Ver DEMO


ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Seguramente ya habrás utilizado o conocerás esta técnica. Se trata de poder utilizar bordes redondeados (que tan bien quedan) en los elementos de tu web sin utilizar imágenes para ello. El método, se vale de jQuery para adaptar los divs que indiques con el efecto que desees y, como se puede ver en la demo online que publiqué, es totalmente transparente con respecto a tu fondo.

Para aplicarlo, luego de agregar la librería jQuery en el head de tu web, debes indicar qué capa quieres redondear y el plugin se encarga de todo.

Mírate los códigos que aparecen a continuación, o mira el source de la demo.

Código 1 - CSS
/* esto no es necesario, puedes utilizar tus propios estilos */
body {background:#333 }
body, div, h1 { font-family: arial; margin: 0; padding: 0;font-size:18px;}
div.ejemplo { background-color: #ccc; padding: 20px;float:left;margin:20px}
Código 2 - JAVASCRIPT
$('#ejemplo1').corner();
Código 3 - HTML
<div id="ejemplo1" class="ejemplo"><h1>Esto es un ejemplo: round</h1></div>

Acerca del Autor:

Martín Iglesias, diseño web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 18 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!