Saltar al contenido principal
LibraTool logoLibraTool

Generador de radio de borde CSS gratis

Diseñe visualmente esquinas redondeadas con control independiente sobre cada esquina. Admite la sintaxis elíptica X/Y para formas de manchas orgánicas.

Funciona sin conexión una vez cargado
border-radius: 20px 20px 20px 20px;
Unidad

Usos habituales

  • Formas Orgánicas de ManchaUsa la sintaxis elíptica X/Y para crear formas de mancha únicas para secciones hero e ilustraciones.
  • Esquinas de Tarjeta y ContenedorEsquinas redondeadas estándar para tarjetas, contenedores y paneles en diseño UI moderno.
  • Formas de Avatar y Foto de PerfilCrea el estilo de esquina correcto para fotos de perfil: circular, squircle o cuadrado redondeado.
  • Píldoras, Etiquetas y InsigniasConstruye botones píldora perfectamente redondeados, etiquetas e insignias con el preset 9999.
  • Diseños de Esquina AsimétricaMezcla radii entre esquinas para crear formas de tarjeta y botón distintivas y reconocibles por marca.

Cómo funciona

El generador de border-radius se ejecuta enteramente en el navegador: no hay servidor, ni biblioteca, ni subida. Construye la cadena de valor CSS border-radius directamente en JavaScript usando el estado de React y useMemo, y luego la aplica como estilo en línea en un elemento div en vivo para que el propio motor CSS del navegador renderice la forma en tiempo real.

  1. 1
    Los controles deslizantes escriben el estado
    Cada entrada de rango escribe en una de ocho variables de estado numéricas: cuatro radios de esquina horizontales y cuatro verticales para el modo elíptico. El modo unificado colapsa las ocho en un solo control deslizante mediante un asistente setAll que sincroniza todos los valores a la vez.
  2. 2
    useMemo ensambla el valor CSS
    Un hook useMemo recalcula la cadena border-radius cada vez que cambia algún valor de esquina, la unidad (px o %), o el interruptor elíptico. En modo estándar produce la abreviatura de cuatro valores; con elíptico activado, añade el separador de barra para la sintaxis completa de ocho valores, por ejemplo 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    El motor CSS del navegador renderiza la vista previa
    La cadena calculada se establece como estilo borderRadius en línea en un elemento div sencillo. El motor de diseño del navegador hace todo el renderizado: no hay canvas, ni SVG, ni código de dibujo de terceros.
  4. 4
    La Clipboard API copia la salida
    Al hacer clic en Copiar se llama a navigator.clipboard.writeText con la declaración CSS (border-radius: ...;) o con la clase de valor arbitrario de Tailwind equivalente (rounded-[...]), según el interruptor de formato seleccionado.

Herramientas relacionadas

🎨

Generador de sombras de caja CSS

Generador visual para CSS box-shadow con vista previa en vivo, apilamiento de múltiples capas, selector de color, alternancia de inserción y copia con un solo clic. Incluye ajustes preestablecidos de material, neumorfismo y brillo.

Probar
🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar
↔️

Generador de CSS Flexbox

Experimenta con dirección flex, ajuste, justificación y alineación en elementos en vivo — y copia el CSS.

Probar

Preguntas frecuentes