Con la llegada del web 2.0 y una nueva forma de diseñar se ha puesto de moda los famosos bordes redondeados, sin embargo, ya los diseñadores andamos cansados de estar creados pedacitos de imagen para los bordes y gastar código para ello encima que en algunos casos descuadran el contenido inicialmente.
La tendencia marcada ahora es que CSS solucione eso o en su caso que Javascript haga fuerza para que funcione en la mayoría de navegadores en especial el odiado Internet Explorer 6. Los navegadores basados Mozilla y Webkit en su mayoría o por lo menos eso tengo entendido, ya pueden hacer uso de los bordes redondeados por CSS.
Leo en Anieto2k que Jonathan Snook consiguió la forma de hacer los bordes redondeados en Internet Explorer de la misma forma sencilla que las comentadas anteriormente.
Tenemos 2 formas para escoger a nuestro gusto:
1. CSS
.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}
// HTML
<div class="curved">Curvd div</div>
Código sencillo que nos permitirá hacer uso del CSS directamente y no colocar ninguna etiqueta JavaScript visible. Pues esta se encuentra en el htc. Aquí les dejo el enlace de border-radius.htc: Descargar y el ejemplo aquí
2. Javascript
<script src=”DD_roundies.js”></script>
<script>
DD_roundies.addRule('.box', 10);
</script>
DillerDesign nos muestra un sistema llamado DD_roundies() que usa Javascript para generar los bordes redondeados mediante VML basado en un ejemplo que el propio Jonathan publicó hace unos meses. Descargar(Anieto2k)
También si navegamos un poco más encontraremos más alternativas en JavaScript como códigos sueltos y otros como plugins de frameworks como es el caso de JQuery.