Bordes redondeados CSS

Todos amamos los bordes redondeados, y no solo es por que el circulo es la figura mas perfecta de la geometría sino por que ya los podemos hacer de manera rápida. Antes de que en Css3 estuviera habilitado el Border Radius, o los bordes redondeandos habian varias maneras de hacer los bordes redondeados, y es que tomabas la imagen de las esquinas, y las encerrabas en un div que colocabas en las esquinas, era realmente horiible, ni hablar de hacer un div de ancho dinamico.

En fin gracias al border-radius podemos hacer los bordes redondeados con solo una linea de código. asi que empecemos.

Bordes redondeados en su forma mas básica

podemos reemplazar los pixeles por em ( o tamaños de “m”), pero esto es independiente.

¿Como funciona Border-Radius, o los bordes redondeados de CSS3 ?

Asumo que todos sabemos que es un compas, igual en otras partes de habla hispana le dicen de otra manera, si es así, comenten para modificar el texto.

Imaginen un rectángulo al cual le pasan un compas a determinada distancia, digamos 5 pixeles de alto y 5 pixeles de lado, al hacer el trazo cortaremos los bordes del rectángulo dandole ese acabado de bordes redondeados que todos amamos, y asi es como funcionan los Bordes Redondeados en CSS3.

Es asi que podemo usar el siguiente codigo

1
border-radius:5px;

¿Y si queremos solo las esquinas superior izquierda e inferior derecha con bordes redondeados?

1
border-radius:5px 0px;

¿Como controlo que bordes redondear en CSS3?

1
border-radius:5px 2px 10px 20px;

 

Otras maneras de usar border-radius en CSS3

Existe otra manera y es la de usar dos valores diferentes, es decir lateral 5px y vertical 2px por ejemplo, se escribe de la siguiente manera.

1
border-radius:5px/2px;

 

Usa las convinaciones que desees y cuentanos que logras, un reto que les pongo a mis alumnos en los cursos es hacer un huevo con esto, veamos cuantos de ustedes lo logran.

 

 

border-radius en firefox, opera y safari

Como este no es un standar aun cada motor utiliza sus reglas propias en seguida una lista de ellas, y recuerden ponerlas en todo código para obtener el mismo resultado en todos los exploradores, excepto Inter&%/ %·/&ler.

1
2
3
4
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;


¿ Te Gusto ? Comenta y compartelo!