02

11

Bordes redondeados asimétricos

Unas de las cosas que hace ya unos años incorporan los navegadores y es un estándar CSS3 es el redondeo de los bordes con border-radius, pero no solo voy ha hablar de esto, sino de los bordes redondeados estableciendo su origen (en el eje X y el eje Y, ahora lo entenderéis).
En el ejemplo muestro varias de las cosas que se pueden hacer con los bordes, que van más allá de simples curvas en las esquinas.

Como podéis ver en el ejemplo los bordes redondeados no tienen porque ser simétricos y tener el mismo radio en toda la curva, sino que podemos establecer el radio en el eje X y el radio en el eje Y, además de poderlo definir por cada una de las cuatro esquinas.
Para establecer los distintos ejes debemos de usar una "/" (barra simple) y poner primero el tamaño del eje X y posteriormente el del eje Y.

1. /* Borde redondeado normal */
2. border-radius:[Radio];
4. /* Borde redondeado asimétrico (como en el ejemplo 4º y 6º) */
5. border-radius:[Radio del eje X] / [Radio del eje Y];

Funcionamiento a fondo del border-radius

Como muestro en el código de arriba se puede establecer bordes redondeados normales y bordes redondeados asimétricamente, siendo los primeros lo más usados, pero diferenciar entre ejes a la hora de redondear los bordes puede servirnos de ayuda para crear diseños originales, y sencillos.
El código CSS de los ejemplos es el siguiente (hay que tener en cuenta que puede ser necesario los prefijos propios de los navegadores):

1. /* Ejemplo 1º */
2. border-radius:50%;
4. /* Ejemplo 2º */
5. border-radius:10px;
7. /* Ejemplo 3º */
8. border-radius:50% 4px;
10. /* Ejemplo 4º */
11. border-radius:20px / 50%;
13. /* Ejemplo 5º */
14. border-radius:10px 100% 10px 20px;
16. /* Ejemplo 6º */
17. border-radius:10px 10px 50% 50% / 10px 10px 90px 90px;

Ejemplos

Un posible uso que le podríamos dar es crear un cuadro de búsqueda en nuestra web.

1. border-radius:6px / 50%;

Y otro ejemplo podría ser un escudo, que se le podría dar la posibilidad de usar de botón (como crear el efecto 3D en los botones lo explique anteriormente).

1. border-radius:10px 10px 50% 50% / 10px 10px 90px 90px;