Desde sus primeras versiones CSS ha tenido como premisa separar el contenido del aspecto visual,lo cual se ha logrado, hoy en día se encuentra en desarrollo la versión de CSS3, yo he venido trabajando con CSS2 , a pesar de que este sigue vigente, es importante comenzar a conocer que opciones nos dará CSS3, es por eso que hoy les traigo un tutorial sencillo que nos permitirá realizar uno de los elemento visuales mas usados hoy en día. Hablo de los bordes redondeados, eso que le dan un toque visual bastante agradable a los contenedores de texto e imágenes.
Para realizar esto haremos uso de la propiedad CSS3 Border-radius, el único inconveniente de este método es que solo funciona con los navegadores Chrome,Firefox, Safari, y no con Internet Explorer, ya saben como se las gastan los de Microsoft con eso de seguir estándares , esperemos que en el IE9 por fin se pongan a la par con sus competidores, pero no se diga mas, manos a la obra.
1.- Lo primero que haremos será crear nuestro div contenedor, como quizás uses muchos bordes redondeados podemos crear una clase para el Div al que llamaremos redondeado. nuestro código puede verse como este :
2.- Ahora lo siguiente sera aplicar la nueva regla de CSS3 para creer los bordes redondeados .
.redondeado {
-moz-border-radius: 20px; /*borde para Firefox*/
-webkit-border-radius: 20px; /*borde para chrome y safari*/
padding-left:15px; /*Ajustamos nuestro texto*/
background-color: black;
color:white;
}
El resultado final sera algo como esto :
Como podrán observer más facil imposible.
Notas finales:
Esta nueva propiedad permite redondear cada una de las esquina por separa para lograr efectos diferentes para esto se pueden utilizar las siguientes propiedades.
Para Firefox
-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomleft-moz-border-radius-bottomright
Para Chrome y Safari
-webkit-border-top-left-radius-webkit-border-top-right-radius-webkit-border-bottom-left-radius-webkit-border-bottom-right-radius
