Generador de border-radius

Ajusta el redondeo de cada esquina y copia el código border-radius. Activa el modo avanzado para dar a cada esquina un radio horizontal y otro vertical distintos y crear formas orgánicas (blobs).

Cómo funciona border-radius

border-radius acepta de uno a cuatro valores, que se aplican en el sentido de las agujas del reloj empezando por arriba a la izquierda: 10px redondea todas las esquinas igual; 10px 20px, la superior izquierda y la inferior derecha con 10px y las otras dos con 20px; y 10px 20px 30px 40px, cada una por separado. También existen las propiedades individuales, como border-top-left-radius.

Con una barra se indican radios distintos en horizontal y en vertical, lo que convierte cada esquina en un cuarto de elipse: 50% / 60% 60% 40% 40% dibuja un huevo. Así se crean las formas orgánicas o «blobs» tan usadas en el diseño web actual.

Círculos y píldoras

Para un círculo usa border-radius: 50% en una caja cuadrada (si no es cuadrada, saldrá una elipse). Para una píldora o botón con extremos redondos, usa un valor en píxeles mayor que la mitad de la altura, como 999px: el navegador lo limita automáticamente y la forma no se deforma al cambiar el ancho.

Las esquinas redondeadas también recortan el fondo y las sombras, pero no el contenido que se sale de la caja: para recortar una imagen, añade overflow: hidden.