Una oda al border-radius

Border-radius es una propiedad –muy reclamada– de CSS3 que nos da la posibilidad de agregar curvas redondeadas a casi todos los elementos HTML. Es básicamente una forma de agregar un poco de suavidad a nuestro diseño.

Una realidad es que, si bien las esquinas redondeadas pueden ser vistas como una plaga en la pseudo web 2.0, bien utilizadas pueden darle un toque distintivo a tu web. Conoce cómo aplicar esta propiedad y cuál es su compatibilidad con los navegadores.

Implementación

Para utilizar border-radius hoy, tenemos que usar CSS de propietario junto con la propiedad original border-radius. Los vendedores utilizan esta prueba para testear nuevas propiedades que todavía no son estándares.

Imagina que deseas una simple caja roja (div) con el id de una con esquina redondeadas. Este es el código que deberías añadir en tu div, para asegurarte que Safari como Firefox brinden las esquinas de forma correcta.

div#one {
width: 200px;
padding: 20px;
border-radius: 10px;
-moz-border-radius: 10px; /* Navegadores Firefox o Gecko */
-webkit-border-radius: 10px; /* Navegadores Safari o Webkit */
background: #F00;
margin-bottom: 10px;
}

Ahora, digamos que sólo deseas que la esquina superior derecha y la inferior izquierda sean redondeadas:

div#two {
width: 200px;
padding: 20px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
background: #F00;
}

Es así de sencillo.

Soporte de Navegadores

Ninguna de las versiones disponibles de IE soportan border-radius (esto no es ninguna sorpresa). Opera no lo soporta tampoco. Sólo las últimas versiones de Safari, Firefox, Camino y Konqueror (utilizando -khtml-border-radius) lo hacen.

Algunas alternativas

Cuando ignorar IE no es una opción valida, existen otras alternativas viables para superar las limitaciones que este navegador impone e implementar las esquinas redondeadas en nuestra web fácilmente.

Suelen considerarse como mejores aquellas que utilizan JavaScript para lograr su cometido, pero también hay varias opciones CSS.

Aquí hay algunas de las más populares:

• jQuery Corners
• corner.js
• curvyCorners
• Nifty Cube

Ejemplos de implementación de border-radius

Encontrar sitios que implementen border-radius no es una tarea fácil. Aquí hay algunos ejemplos:

Twitter

Virb’s Login page

El resto del sitio no utiliza border-radius, pero este bonito formulario de registro sí.

Wordpress’s Admin Panel

El panel de administración de Wordpress es una fiesta de esquinas redondeadas… imaginen el tiempo que ahorraron utilizando border-radius.

Tutorial9

Conclusión

Implementar esquinas redondeadas sería una tarea tanto más sencilla si se utilizara esta simple propiedad CSS.

Pero, ¿Piensas que realmente la implementación de border-radius hará que la red se pueble de diseños redondeados?

Fuente: Web Designer Notebook