Bordes redondeados con CSS3


       Uno de los recursos estéticos que más se está usando para romper con la rigidez de bloques y bordes de las páginas web son las esquinas redondeadas. Durante años se han hecho virguerías para conseguir este efecto, tales como poner imágenes del mismo color del fondo en las esquinas, algoritmos que colorean pixeles, etc.

       Por ello una de los primeros atributos CSS3 en ser implementados por los navegadores fueron las esquinas redondeadas (border-radius). Comenzaron teniendo prefijo (-moz -webkit), pero también hace tiempo que están libres de prefijo. Yo lo estoy comenzando a usar solo sin prefijo. Solo es un atributo estético, todo sigue funcionando bien aunque no se vean las esquinas redondeadas. Los navegadores que usaban prefijo eran Chrome (4 y anterior) cuya cuota actual es casi nula, Safari (4 y anteriores) 0.1% de uso y Firefox (3.6 y anteriores) , con un 4.6% de uso. Nos podríamos plantear incluir solo (-moz) para cubrir este porcentaje. Todos estos datos son según la estadística de la W3C en Marzo de 2012.

       Por otro lado está Internet Explorer, donde border-radius funciona sin prefijo desde la versión 9, pero no existe en versiones 8 y anteriores, lo que supone un 12,8% del mercado. Aquí la única solución es usar alternativas a la vieja usanza, como alguna extensión de Jquery que redondea coloreando pixeles.

       La base de esta propiedad css es la siguiente:

#divRedondeado{
border-radius: 8px;
}



       Cuantos más pixeles pongamos más redondeadas tendrá las esquinas el elemento. Funciona en casi cualquier elemento, divs, inputs, botones, etc.

       Pero vamos a complicarlo un poco más. Podemos especificar un redondeado diferente para cada esquina. Por ejemplo queremos que las esquinas superiores sean redondeadas, pero las inferiores no:

#divRedondeado2{
border-radius: 8px 8px 0 0;
}

Div con esquinas superiores redondeadas
       Cuyo significado es: Superior-izquierdo Superior-derecho Inferior-izquierdo Inferior-derecho.

       Incluso se puede ajustar el redondeado, haciendo que se redondee más vertical u horizontalmente, separando el valor horizontal y vertical por “/”. Si usamos los 4 valores, primero se especifican todos los horizontales y después todos los verticales.

#divRedondeado3{
border-radius: 8px 8px 0 0 / 8px 22px 0 0;
}

Lo interesante es la esquina superior derecha
       Ahora la esquina superior-derecha es mucho más redonda en vertical que en horizontal.

       Por último un pequeño truco es que si damos a border-radius la mitad del valor de alto y ancho de un elemento, obtenemos un círculo, solo con CSS, sin imágenes y de forma sencilla.

#circulo{
width: 100px;
height: 100px;
border-radius: 50px;
}

Have a nice day