Border-radius en Internet Explorer es posible gracias a un plugin jQuery

Nifty Corners es un plugin jQuery que nos permite hacer bordes redondeados (border-radius) sin la necesidad de hacerlo con imágenes y que sea compatible con todos los exploradores, incluyendo Internet Explorer.

Este plugin ha sido testeado con éxito en exploradores obsoletos como Internet Explorer 5.5, IE6, IE7 e IE8, Opera 8.5, Firefox 1.5 y Safari 2.0.

IMPLEMENTANDO NIFTY CORNERS

Recuerden siempre que para todos los plugins jQuery necesitan tener en su sitio la librería de jQuery que la podemos llamar desde Google Apis o Code jQuery.

Llamamos a la librería y al plugin jQuery dentro de las etiquetas <head> en nuestro html.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="niftycube.js"></script>

A continuación escribimos nuestro script para seleccionar que div tendrá los bordes redondeados.

<script type="text/javascript">
window.onload=function(){
Nifty("div#dinvaders","normal");
}
</script>

Este plugin solamente nos permite tener tres tamaños de bordes redondeados (border-radius) que son small (2px), normal (5px) y big (10px). En nuestro ejemplo determinamos que la div id #dinvaders tendría un border-radius de 5px.

Si queremos que más elementos tengan bordes redondeados los podemos agregar con una coma.

<script type="text/javascript">
 window.onload=function(){
 Nifty("div#dinvaders, div#tutorial","normal");
 }
</script>

DescargaDemoDemo

Si quieres conocer efectos con CSS3 puedes visitar el siguiente artículo

Scroll to top