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

Generador CSS Squircle: cuadrado redondeado

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 al 30%, un redondeo moderado que se ubica entre un cuadrado agudo y un círculo completo. No es una verdadera ardilla matemática (una superelipse), pero es lo más cercano que puede llegar a ser una sola propiedad CSS, y es el valor que la mayoría de los sistemas de diseño buscan cuando quieren esa apariencia.

El nombre proviene de los íconos de aplicaciones cuadrados redondeados popularizados por iOS: suficiente curva en cada esquina para sentirse suave y amigable, pero nunca tanto como para que la forma parezca redonda. Los mosaicos de íconos, las miniaturas de tarjetas y los marcos de avatar modernos se apoyan en radios en este mismo rango aproximado exactamente por esa razón.

Mueva el control deslizante vinculado hacia arriba para obtener una sensación más suave y circular o hacia abajo para obtener una sensación más nítida y cuadrada: la línea CSS se actualiza con cada cambio, lista para copiar una vez que la curva se sienta adecuada para su ícono o tarjeta.

🛡️
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.