post icon

Redondear bordes con CSS

Hoy día es raro ver ya sitios web’s con contornos muy cuadrados, la tendencia es redondear la mayor cantidad de objetos posibles. Esto es posible hacerlo con CSS3 en la mayoría de los navegadores excepto IE 8 y anteriores y Opera (hasta ahora en todas sus versiones), en estos casos se necesita “emular” una visualización redondeada armando con imágenes pequeñas y unidas con html.

En éste post nos centraremos con la técnica del CSS, donde es bastante sencillo comprender e implementar. El estandard de la W3C dice que podemos utilizar la siguiente nomenclatura:

W3C

-border-radius:15px 10px 15px 10px;
-border-top-left-radius:15px;
-border-top-right-radius:10px;
-border-bottom-right-radius:15px;
-border-bottom-left-radius:10px;

Aunque en la práctica ningún navegador excepto IE9 Beta lo está soportanto, pero el resto de los navegadores ya ofrecen soporte con cláusulas especiales para cada navegador especifico.

Mozilla Firefox

-moz-border-radius:15px 10px 15px 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-bottomleft:10px;

Google Chrome / Safari

-webkit-border-radius:15px 10px 15px 10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-webkit-border-bottom-left-radius:15px;

Konqueror

-khtml-border-radius:15px 10px 15px 10px;
-khtml-border-top-left-radius:15px;
-khtml-border-top-right-radius:10px;
-khtml-border-bottom-right-radius:15px;
-khtml-border-bottom-left-radius:10px;

Prueba de ejemplo

Prueba de un fieldset redondeado
19 diciembre 2010

Comentarios desde Facebook:

Trackbacks/Pingbacks

  1. Tweets that mention Redondear bordes con CSS | DevTroce.com -- Topsy.com UNITED STATES - 19 diciembre 2010

    […] This post was mentioned on Twitter by DJ Hennion. DJ Hennion said: Redondear bordes con #CSS: Hoy día es raro ver ya sitios #web’s con contornos muy cuadrados… http://goo.gl/fb/jskOW RT @devtroce: Red… […]

Responder