Esquinas redondeadas

Las esquinas redondeadas, hasta hace bien poco tiempo, o lo que es lo mismo, hasta la llegada de CSS3, solo erá posible conseguirlas utilizando imagenes, o incluso solo con CSS, pero con una técnica muy rudimentaria y con la utilización de excesivo código.

Gracias o como dije anteriormente, CSS3 a llegado, y se nos ha facilitado mucho el trabajo en este sentido, ademas de hacerlo de una manera nativa, sin tener que utilizar invenciones para conseguirlo.

La etiqueta tan esperada y deseada por muchos es la siguiente:

border-radius

Ademas nos da la posibilidad de darle varios usos y poder utilizarla de varias maneras para nuestro fin, que no es otro que darle un poco de buen aspecto a nuestros diseños sin demasiada complijidad.

Su utilización se podría dividir en dos opciones. Estas opciones serian las siguientes:

• Todas las esquinas redondeadas con el mismo radio
• Darle un radio diferente e individual a cada esquina

Todas las esquinas con el mismo radio


Esta primera opción podriamos decir es la mas sencilla de utilizar y su sintaxis sería la mas basica de utilización de border-radius.

Su sintaxis sería la siguiente:

border-radius: radio;

radio: valor del radio que le queremos dar a las esquinas redondeadas.

Ejemplo:

Código:  border-radius:5px;

Ejemplo 1.1

Un radio diferente e individual para cada esquina


En esta opción tenemos la posibilidad de elegir el radio de cada una de las esquinas. La manera que explicaré será la abreviada, ya que si nos acostumbramos a utilizar este metodo nos ahorraremos en muchas ocasiones bastante código de escribir.

El truco de acordarse de este metodo, es seguir la dirección de las agujas del reloj y comenzar desde el punto 0,0 de cualquier eje de coordenadas, la esquina superior izquierda.

El primer valor que escribiremos pertenecerá a la esquina superior izquierda, el segundo a la esquina superior derecha, el tercero a la esquina inferior derecha y el ultimo valor será el de la esquina inferior izquierda.

Su sintaxis es la siguiente:

border-radius: sup-izq sup-der inf-der inf-izq;

sup-izq: valor del radio de la esquina superior izquierda

sup-der: valor del radio de la esquina superior derecha

inf-der: valor del radio de la esquina inferior derecha

inf-izq: valor del radio de la esquina inferior izquierda

Ejemplo:

Código: border-radius:5px 10px 15px 20px;

Ejemplo 1.2

Este metodo es utilizado siempre y cuando queramos darle un valor diferente de radio a cada esquina. Pero hay situaciones en que estos valores son coincidentes en dos o tres esquinas. Para estos casos existen otros metodos abreviados que pasaré a explicar ahora:

Esquinas opuestas con igual valor

Para este caso, podriamos escribir nuestro código abreviado con dos valores

Su sintaxis sería la siguiente:

border-radius: sup-izq/inf-der sup-der/inf-izq;

sup-izq/inf-der: valor del radio comun a las dos esquinas superior izquierda, inferior derecha

sup-der/inf-izq: valor del radio comun a las dos esquinas superior derecha, inferior izquierda

Ejemplo:

Código: border-radius:5px 20px;

Ejemplo 1.2

Primera y tercera esquina de diferente valor

En está situación nos podemos encontrar, en que las esquinas opuestas superior derecha e inferior izquierda tienen el mismo valor y el resto valores diferentes. Para este caso utilizariamos la siguiente sintaxis:

border-radius: sup-izq sup-der/inf-izq inf-der;

sup-izq: valor del radio de la esquina superior izquierda.

sup-der/inf-izq: valor del radio comun de la esquina superior derecha y la esquina inferior izquierda.

inf-der: valor del radio de la esquina inferior derecha.

Ejemplo:

Código: border-radius:5px 10px 20px;

Ejemplo 1.2

Creación de elipses

Aparte de lo que hemos visto hasta ahora con border-radius tambien tenemos la opción de crear elipses. Para poder realizar una elipse utilizamos la siguiente sintaxis:

border-radius: rh-sup-izq rh-sup-der rh-inf-der rh-inf-izq / rv-sup-izq rv-sup-der rv-inf-der rv-inf-izq;


rh-sup-izq: valor del radio horizontal de la esquina superior izquierda

rh-sup-der: valor del radio horizontal de la esquina superior derecha

rh-inf-der: valor del radio horizontal de la esquina inferior derecha

rh-inf-izq: valor del radio horizontal de la esquina inferior izquierda

/: separador entre radios horizontales y verticales

rv-sup-izq: valor del radio vertical de la esquina superior izquierda

rv-sup-der: valor del radio vertical de la esquina superior derecha

rv-inf-der: valor del radio vertical de la esquina inferior derecha

rv-inf-izq: valor del radio vertical de la esquina inferior izquierda

Ejemplo:

Código: border-radius:10px 20px 10px 20px/5px 10px 5px 10px;

Ejemplo 1.3

Ejemplo visual de los distintos tipos de radio

En el siguiente ejemplo veremos de forma visual la creación de un circulo, una elipse, y un cuadro con esquinas redondeadas circulares y elipticas.

Ejemplo:

border-radius:50px;

border-radius:100px 100px 100px 100px/50px 50px 50px 50px;

border-radius:50px 100px 100px 50px/50px 50px 50px 50px;