Generador de border-radius

Cómo usar el generador de border-radius

1. Arrastra los puntos situados en los bordes de la vista previa. Cada punto de color define el radio horizontal de una esquina; si marcas Esquinas elípticas (8 valores), los puntos blancos definen los radios verticales.
2. O escribe valores exactos en Esquinas: Arriba a la izquierda, Arriba a la derecha, Abajo a la derecha y Abajo a la izquierda, cada una con un campo Horizontal y otro Vertical.
3. Elige la Unidad: % (porcentaje de la caja) o px (píxeles). Al cambiar de unidad, los valores actuales se convierten y la forma no varía.
4. Ajusta Ancho de la caja (px) y Alto de la caja (px) al tamaño de tu elemento, y usa Todas las esquinas para redondear las cuatro a la vez.
5. Prueba los Ajustes predefinidos (Redondeado, Píldora, Círculo, Hoja, Gota, Huevo, Ticket y tres blobs) o pulsa Blob aleatorio para obtener una forma orgánica.
6. Marca Propiedades individuales si prefieres las cuatro declaraciones border-*-radius y copia el Código CSS con Copiar.

Teclado: selecciona un punto y pulsa las flechas para cambiar su radio un paso (10 con Mayús).

La sintaxis de border-radius

border-radius admite de uno a cuatro valores, en este orden: arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda. Como ocurre con los márgenes, los valores que faltan se copian de la esquina opuesta: border-radius: 10px 20px redondea arriba a la izquierda y abajo a la derecha con 10px, y las otras dos con 20px. La herramienta siempre escribe la forma equivalente más corta.

En realidad, cada esquina es un cuarto de elipse con dos radios. Una barra separa los radios horizontales de los verticales, lo que da hasta ocho valores:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Antes de la barra van los radios horizontales de las cuatro esquinas; después, los verticales. Si ambas listas son iguales, se omite la parte de la barra.

¿Píxeles o porcentajes?

• px da la misma curva sea cual sea el tamaño del elemento. Es lo adecuado para botones, tarjetas y campos de formulario: border-radius: 8px.
• % es relativo al elemento: los radios horizontales a su ancho y los verticales a su alto. 50% convierte un cuadrado en un círculo y un rectángulo en una elipse. Los porcentajes son lo que permite que los blobs se escalen con el elemento.

Para un botón en forma de píldora, usa un radio en píxeles de al menos la mitad del alto. El ajuste Píldora hace justo eso con el tamaño de caja que hayas indicado; un valor enorme como 999px también funciona.

Cuando dos radios contiguos suman más que el lado que comparten, los navegadores reducen todos los radios en proporción hasta que caben. Por eso la forma no se rompe si cruzas dos puntos al arrastrarlos.

Formas blob

Los ajustes de blob y Blob aleatorio usan ocho porcentajes en los que los dos puntos de cada lado suman 100 %. Así las curvas se encuentran exactamente y la forma parece un canto rodado liso. Anima el paso de un blob a otro con una transition de CSS sobre border-radius para lograr un efecto de «morphing».