Fernanda Civit

Bordes Redondos con CSS

// August 3rd, 2010 // Programacion

W3C ofrece algunas opciones nuevas en cuanto a CSS3, de las cuales una es los bordes redondeados. Tanto en Mozilla como en Safari 3 estas funciones ya se encuentran en práctica. La misma permite crear esquinas redondas sobre temas de caja. Este es un ejemplo:

Usuarios de Mozilla y Safari deberian ver esta caja con bordes redondos

El código html de arriba es el siguiente:
div style=” background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding:10px;”

Estas diferentes esquinas también pueden ser manejadas cada una por su cuenta. Mozilla tiene otros nombres para la función. Las cuales son:
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Si queremos que todas las esquinas sean redondas no es necesario que escribamos todo ese código en nuestro CSS, sólo basta con poner:
-moz-box-shadow:0 0 7px;
-webkit-box-shadow:0 0 7px;