CSS Border Radius Generator

CSS Border Radius Generator produce CSS con radio de borde correcto para cualquier forma, desde simples esquinas redondeadas hasta complejos radios elípticos de 8 valores. El modo simple aplica un radio igual a las cuatro esquinas con un solo control deslizante. El modo avanzado ofrece controles deslizantes independientes para cada esquina con un conmutador de esquinas de enlace. La palanca de radios elípticos desbloquea el segundo conjunto de cuatro valores en el radio del borde: los radios X e Y por esquina de forma independiente. Esto permite formas asimétricas como lágrimas, hojas y formas orgánicas. Los ajustes preestablecidos de formas cubren: Cuadrado, Redondeado, Píldora, Círculo, Ardilla, Hoja, Lágrima y Burbuja de chat. El resultado muestra la taquigrafía CSS válida más compacta y la clase equivalente de Tailwind.

Características clave

• Modos simples y avanzados

  Modo de control deslizante único o controles deslizantes independientes por esquina con alternancia de esquinas de enlace.

• Modo de radios elípticos

  Desbloquea los radios X e Y por esquina para la taquigrafía CSS completa de 8 valores.

• Vista previa en tiempo real

  Vista previa del rectángulo en vivo que muestra el radio del borde actual aplicado al instante.

• 8 ajustes preestablecidos de formas

  Ajustes preestablecidos de Cuadrado, Redondeado, Píldora, Círculo, Ardilla, Hoja, Lágrima y Burbuja de chat.

• Taquigrafía CSS compacta

  Genera la taquigrafía válida más compacta utilizando reglas de compresión de radio de borde.

• Equivalente de viento de cola

  Muestra la clase Tailwind redondeada-* cuando corresponda.

1. 1

   Elija el modo Simple o Avanzado

   Modo simple para esquinas iguales, Modo avanzado para control por esquina.

2. 2

   Ajustar controles deslizantes

   Arrastre los controles deslizantes del radio de las esquinas y observe cómo se actualiza la forma de vista previa en tiempo real.

3. 3

   Habilitar elíptica (opcional)

   Cambie los radios elípticos para obtener radios X e Y independientes por esquina para formas orgánicas.

4. 4

   O cargar un preset

   Haga clic en cualquier miniatura preestablecida de forma para cargar su configuración.

5. 5

   Copia el CSS

   Copie la regla CSS completa o solo el valor del radio del borde.

Explore these tools that work great alongside CSS Border Radius Generator: