Hablemos de los bordes redondeados en CSS3 (border-radius)

La propiedad border-radius nos permite crear esquinas redondeadas sin la necesidad de imágenes o marcas adicionales como lo hacíamos anteriormente que teníamos que cortar los bordes redondeados en photoshop y crear una cantidad de div para dar un aspecto agradable a un bloque o div. Para añadir esquinas redondeadas a nuestra caja, simplemente se añade:

En el código #ejemplo1 lo que especificamos fue que al elemento que se aplique este estilo va a tener un radio de 25 px en las esquinas, también lo podríamos haber escrito de la forma en que se encuentra #ejemplo1 pero es mejor simplificarlo como el primero.

esquinas-redondeadas-css3

También podemos crear deformaciones de este estilo, podemos jugar con los ángulos para crear objetos que antes eran imposibles con solo css, como te muestro a continuacion:

bordes redondeados desiguales css3

O como estos:

circulo-css3-bordes-radius

Otro Ejemplo: para el siguiente codigo

Obtenemos esta imagen:

ejemplo-border-radius-css3

Soporte de los navegadores a (border-radius)

(Opera 10 +), (Safari 5 +), (Chrome 5+), (IExplorer 9 +), (Firefox 4+) Apoyan los bordes redondeados en css de forma nativa es decir, los podemos utilizar sin los famosos prefijos de los navegadores, pero para Firefox antes de su version 4 tenemos que usar su prefijo de navegador antes de ejecutar el estilo, Aunque estas versiones antiguas no se utilizen te mostrare el ejemplo, seria almos mas o menos asi:

bordes-redondeados-desiguales-css3-prefix

—————————————–

Para mas informacion acerca de border-radius o bordes redondeados ve a estas web:
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
http://www.w3.org/TR/css3-background/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo