English Português

jQuery Corners es un plugin que te permite crear esquinas redondeadas de una manera muy sencilla, sin imágenes o maquetación adicional en el código. Simplemente se define una clase y se aplica a un elemento HTML. Paso a paso esto sería:

1. Descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas <head> y </head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

2. Se define la clase que creará las esquinas redondeadas de la siguiente forma:

<script>$(document).ready( function(){
  $('.redondas').corners();
});</script>

3. Y simplemente se aplica la clase a cualquier elemento HTML, por ejemplo a un típico selector DIV:

<div class="redondas">
	Contenedor con esquinas redondeadas.
</div>

Esta es la forma más sencillas de utilizar el script, pero tiene varias opciones de configuración, como definir el radio de curvatura general o para cada esquina o aplicar el script a botones de formulario que se pueden consultar en su sitio oficial.

Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. sağlık / Hace 8 años /

      thanks

      Responder a sağlık →
    2. Migue / Hace 7 años /

      Gracias por el script, me ha servido bastante, ya que llevaba tiempo que queria algo asi.

      Responder a Migue →
    3. sebastian / Hace 7 años /

      Hola he probado jquery corner y funciona bien cuando trabajo con colores, pero cuando pongo una imagen de fondo de la pagina me muestra los bordes redondeados pero con espacios en blanco a lado de los bordes, alguien sabe como solucionarlo.

      Responder a sebastian →
    4. fernando / Hace 7 años /

      gracias lo estoy usando y muy buen material para desarrolladores web

      Responder a fernando →
    5. dhamaso / Hace 7 años /

      gracias por la información, aver si me funciona con el maldito internet explorer XD

      Responder a dhamaso →
    6. Odelon / Hace 6 años /

      Gracias por la info. Muy útil.

      Responder a Odelon →
    7. calimacaco / Hace 6 años /

      Excente.!!!

      Responder a calimacaco →
    8. Javier / Hace 6 años /

      pesimamente explicado ni siquiera un ejemplo funcionando… pesimo!

      Responder a Javier →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad