Las bondades del css3: border-radius, esquinas redondeadas

   Ya se que la gran mayoría de vosotros conocéis los nuevos elementos del CSS3, el cual nos trae funciones que nos simplifican el diseño de la página, sin necesidad de incorporar imágenes, las cuales, además, aumentan su peso y relantizan su carga. Pero, siguiendo con la página de ejemplo Las Edades de la Tierra, en la cual pretendo incorporar la mayoría de los nuevos elementos CSS3 y las etiquetas HTML5, sigo con la explicación.

   En este caso le toca el turno a border-radius, el cual nos permite redondear las esquinas de una caja o div que tenga un borde alrededor. En este caso voy a plasmar parte del código que he hecho para la caja que tenéis en Las Edades de La Tierra, llamada 'Enlaces de Interés' a la cual e puesto el ID #enlaces. El código CSS es el siguiente:

#enlaces {

    border-color: #00FF99;


    border-style: solid;

    border-width: 2px;

    border-radius: 10px 10px 10px 10px;

}

   Las tres primeras lineas del código son del CSS de siempre y, con ellas, le damos un color al borde, el estilo sólido y un grosor de 2 píxeles. La cuarta linea es la que pertenece a CSS3 y, con ella, le damos un radio a las cuatro esquinas de 10px. Al tener el mismo radio las cuatro esquinas con escribir border-radius:10px; bastaría. Pongo los cuatro para explicar que el orden sería el siguiente: de izquierda a derecha, el primer número esquina superior izquierda, el segundo esquina superior derecha, el siguiente esquina inferior derecha y, por último, esquina inferior izquierda. Es decir empezando arriba a la izquierda iríamos siguiendo el sentido de las agujas del reloj.

   En el caso de los paneles que tengo a la izquierda de la página (mesozoico, paleozoico etc...) el código debería ser como sigue:

.menu {

   border-color:#00FF99;

   border-style: solid solid solid none;

   border-width: 1px 1px 1px 0;

   border-radius: 0 15px 15px 0;

}

   Es sencillo de entender, sólo decir que no he puesto los prefijos de los navegadores ya que todas las versiones actualizadas lo soportan (incluido el IE9). Si se quiere dar cobertura a versiones antiguas no olvidéis poner los prefijos (-webkit-, -moz-, -o-), he probado el prefijo -ms- para versiones posteriores al IE9 pero no lo soporta.