Bordes redondeados con jQuery Corner

Una tarea pendiente para todo programador es conseguir con los contenedores o divs tengan bordes redondeados o de alguna forma especial distinto a los típicos bordes cuadrados o rectangulares en navegadores conflictivos como Internet Explorer 6.0 o 7.0.

Si no se puede conseguir con CSS utilizando la propiedad «border-radius» podemos utilizar el plugin jQuery Corner para conseguir distintas esquinas para nuestros contenedores.

Para utilizarlo en nuestro <head> deberemos incorporar los estilos necesarios, librería jQuery y el plugin jQuery Corner:

<style>
#content {
    float:left;
    width:300px;
    min-height:50px;
    margin-left:50px;
    margin-top:50px;
    border:1px solid #006699;
    background:#0099CC;
    padding:5px;
}
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#content').corner("round 8px");
});
</script>

Y en el <body> nuestro contenedor con esquinas redondeadas:

<div id="content">
    <p>contenido...</p>
</div>

Ver el ejemplo en funcionamiento

Puedes ver más ejemplos y descargar el plugin

 

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 voto, promedio: 4 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Una respuesta a “Bordes redondeados con jQuery Corner”

  1. Adolfo dice:

    Pensé que era algo más complicado, muchas gracias por tu explicación clara y concisa.

    Saludos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre