Generador de border-radius CSS
Crea visualmente border-radius en CSS con vista previa en directo y copia código listo para producción.
border-radius: —;
100 % privado: todo se ejecuta en tu navegador. No se sube nada.
Acerca de Generador de border-radius CSS
El Generador de Border Radius CSS crea de todo, desde tarjetas suavemente redondeadas hasta formas orgánicas tipo blob. Arrastra los controladores de esquina directamente en la vista previa, o establece cada esquina numéricamente, incluyendo la sintaxis completa de ocho valores, donde cada esquina tiene radios horizontales y verticales separados. Ese segundo eje es lo que desbloquea huevos, hojas, lágrimas y blobs.
Un interruptor de esquinas vinculadas mantiene las cuatro esquinas sincronizadas para un redondeo uniforme clásico, mientras que desvincularlas libera cada esquina para formas asimétricas. Doce ajustes predefinidos (redondeado, píldora, círculo, squircle, dos blobs, hoja, huevo, arco, lágrima, pétalo y onda) demuestran lo que puede hacer la propiedad, y un botón de aleatorizar genera formas orgánicas nuevas sin parar.
Puedes cambiar la unidad, recolorear el elemento y el lienzo para que coincidan con tu diseño, y copiar el valor de border-radius a secas o una regla CSS completa. La herramienta es 100% del lado del cliente: nada se sube.
Cómo usar Generador de border-radius CSS
- Arrastra los controladores de esquina en la vista previa, o desactiva "Vincular todas las esquinas" para editar cada esquina por separado.
- Establece el radio horizontal y vertical por esquina para formas orgánicas tipo blob.
- Elige tu unidad y ajusta los colores del elemento y del fondo para previsualizar en contexto.
- Prueba los ajustes predefinidos (píldora, squircle, blob, hoja, lágrima y más) o pulsa aleatorizar.
- Copia el valor de border-radius o el CSS completo.