⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de formas de estadio/píldora CSS

Diseñe visualmente el radio del borde de CSS: cuatro controles deslizantes de esquina independientes en px o porcentaje, un atajo de enlace en todas las esquinas para círculos y píldoras instantáneos, además de un modo de burbuja orgánica con formas aleatorias.

12px
12px
12px
12px
Procesando... 0%

Resultado

Esta página abre el generador de radio de borde con las cuatro esquinas vinculadas y empujadas a un radio muy grande: 999 px. En un rectángulo típico del tamaño de un botón, el navegador recorta un radio tan grande exactamente a la mitad de la altura del cuadro, que es lo que produce la forma de píldora o estadio completamente redondeada en lugar de un cuadrado con esquinas ligeramente redondeadas.

Esta es la razón por la que los botones tipo pastilla no necesitan un valor de radio preciso ajustado a la altura de cada botón: cualquier número cómodamente mayor que la mitad de la altura da el resultado recortado idéntico, razón por la cual 999px (o incluso 9999px) se ha convertido en la abreviatura informal de la comunidad para "redondear todo esto" en CSS.

Cambie el tamaño del cuadro en su propio diseño y los mismos 999px seguirán produciendo una pastilla completa a cualquier altura, ya que el navegador siempre recorta automáticamente la mitad del cuadro. Copie el CSS una vez que se vea bien o desvincule las esquinas para construir una cápsula asimétrica.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Modo de esquinas: controles deslizantes de radio independientes arriba a la izquierda, arriba a la derecha, abajo a la derecha y abajo a la izquierda, cada uno conmutable entre unidades de px y porcentaje.
  • Casilla de verificación para vincular todas las esquinas que dirige cada esquina desde un control deslizante, además de una vista previa de tablero de ajedrez sobre un fondo claro u oscuro para que las esquinas recortadas permanezcan visibles.
  • Modo Blob con un botón Aleatorizar que crea formas orgánicas de sintaxis de barra de ocho valores, que se muestran en tamaño grande y listas para copiar como CSS.

Beneficios clave

✓ Cada control deslizante actualiza la vista previa en vivo y la línea CSS al instante, por lo que nunca tendrás que adivinar cómo se ve realmente 12px 40% 8px 24%.
✓ El atajo de enlace de todas las esquinas convierte un control deslizante en un círculo, pastilla o ardilla perfecto sin tocar las otras tres esquinas con la mano.
✓ El modo Blob genera formas orgánicas y aleatorias con la sintaxis de barra diagonal de ocho valores de CSS: una apariencia que un solo valor de radio de borde nunca podrá producir.

Casos de uso

  • • Marque los radios de las cuatro esquinas de una tarjeta de forma independiente: redondee solo la parte superior de un panel desplegable o solo un lado de una pestaña.
  • • Vincula las cuatro esquinas a un control deslizante para construir un círculo perfecto, un botón de pastilla con forma de estadio o una ardilla estilo iOS en segundos.
  • • Cambie al modo blob y presione Aleatorizar hasta que una forma orgánica se ajuste al espacio vacío detrás de una imagen de héroe o avatar, luego copie el CSS.