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.
Pensé que era algo más complicado, muchas gracias por tu explicación clara y concisa.
Saludos!