Vale, lo reconozco, me encanta plantar bordes redondeados en las páginas que desarrollo.
Sin embargo, es una propiedad la de los bordes redondeados en CSS que todavía no es soportada de forma nativa en todos los navegadores del mercado.
Vamos a ver a continuación un resumen rápido de cómo trabajar con esta propiedad de bordes redondeados con CSS en aquellos navegadores que ejecutan este efecto de forma nativa: border-radius.
¿Qué navegadores lo soportan?
Como siempre, hay un navegador que se queda por el camino, y éste no podía ser otro que Internet Explorer.
El resto de navegadores, Firefox (Gecko), Safari, Chrome o incluso Opera (más recientemente) han incorporado ya el soporte de bordes redondeados con css, aunque bien es cierto que cada uno usando nombres diferentes para la propiedad.
¿Cómo se implementa?
Utiliza border-radius para versiones recientes de Opera y Chrome
Ejemplo:
border-radius: 5px;
Utiliza -moz-border-radius para Firefox (motor Gecko)
Ejemplo:
-moz-border-radius: 5px;
Utiliza -webkit-border-radius para Safari o Chrome
Ejemplo:
-webkit-border-radius: 5px;
¿Qué ocurre entonces en Internet Explorer?
Nada, simplemente volverás al mundo de las esquinas.
¿Todas las esquinas llevan el mismo radio?
No tiene porqué. Al igual que pasa con propiedades como padding o margin, border-radius cuenta también con 4 valores posibles, comenzando por el valor superior izquierdo, y siguiendo según el sentido de las agujas del reloj.
Por lo tanto, podremos generar efectos como estos:
.sample {
width: 250px;
height: 100px;
background-color: #CDEB8B;
border: solid 1px #008C00;
margin-top: 25px;
margin-bottom: 25px;
}
.rounded {
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
}
.rounded2 {
-moz-border-radius: 50px 50px 0px 0px;
-webkit-border-radius: 50px 50px 0px 0px;
-ms-border-radius: 50px 50px 0px 0px;
border-radius: 50px 50px 0px 0px;
}
.rounded3 {
-moz-border-radius: 50px 0px 50px 0px;
-webkit-border-radius: 50px 0px 50px 0px;
-ms-border-radius: 50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
}
Vaya coñazo
Pues sí, para qué negarlo. Aún así, si te apetece puedes darte una vuelta por el servicio web border-radius.com que te permite de forma visual generar el código CSS que necesites para el resultado que desees.