ccs para desarrollo de aplicaciones

CSS 3 incorpora nuevas propiedades para el control de bordes de los elementos. Ahora se permiten bordes con las esquinas redondeadas, bordes con imágenes (incluso varias imágenes se pueden utilizarpara definir el aspecto del borde), sombras, etc.

En este artículo vamos a explicar cómo realizar bordes redondeados con CSS3.

Tenemos la propiedad border-radius, que permite definir bordesredondeados en las esquinas, especificando las medidas del radio que deben darse a la curva de las esquinas. Su uso sería aproximado al que vemos a continuación:

border-radius: 5px;

Definiría unradio de 5 píxeles en el redondeo de las esquinas del elemento. Por el momento Mozilla ha adoptado este atributo con un nombre especial, que es válido para productos como Firefox, mientras que lasespecificaciones de CSS3 no hayan alcanzado el estado "Candidate Recommendation", que es cuando se supone que los distintos navegadores deben implementarlas. El nombre del atributo por el momento es:-moz-border-radius
Los navegadores basados en WebKit, como Google Chrome o Safari, también soportan las esquinas redondeadas de CSS 3, pero el atributo border-radius tampoco funciona directamente,como en el caso de Firefox, sino que hay que utilizar un "alias": -webkit-border-radius.

Por lo que respecta a Internet Explorer hay que decir que todavía no soporta este atributo de CSS 3, peroesperemos que los chicos de Microsoft lo puedan implementar pronto en el navegador, o que las especificaciones de CSS3 pasen rápido al estado "Candidate Recommendation", que sería el llamamiento para quese implementen en la generalidad de los navegadores.

Por el momento, para navegadores Mozilla y WebKit que son los primeros en adaptarse a CSS3, podemos utilizar el atributo border-radius de lasiguiente manera:

DIV {
border: 1px solid #000000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;
}

Con esto conseguimos que todos los div tengan un borde redondeado...