Saltar ao contido principal
LibraTool logoLibraTool

Xerador de radio de bordo CSS de balde

Deseña visualmente esquinas redondeadas con control independente sobre cada esquina. Soporta a sintaxe elíptica X/Y para formas orgánicas.

Funciona sen conexión unha vez cargado
border-radius: 20px 20px 20px 20px;
Unidade

Usos habituais

  • Formas de Blob OrgánicasUse a sintaxe elíptica X/Y para crear formas blob únicas para seccións de herói e ilustracións.
  • Esquinas de Tarxetas e ContedoresEsquinas redondeadas estándar para tarxetas, contedores e paneles en deseño UI moderno.
  • Avatar e Imaxes de PerfilCrea o estilo de esquina correcto para imaxes de perfil: circular, squircle ou cadrado redondeado.
  • Píldoras, Etiquetas e InsigniasConstrúe botóns de píldora perfectamente redondeados, etiquetas e insignias coa preestablecida 9999.
  • Deseños de Esquina AsimétricaMestura radios entre esquinas para crear formas de tarxeta e botón distintivas e recoñecibles pola marca.

Como funciona

O xerador de border-radius execútase enteiramente no navegador — non hai servidor, non hai biblioteca e non hai subida. Constrúe a cadea do valor CSS border-radius directamente en JavaScript usando o estado de React e useMemo, e despois aplícao como estilo en liña nun elemento div en directo para que o propio motor CSS do navegador renderice a forma en tempo real.

  1. 1
    Os controis deslizantes escriben o estado
    Cada entrada de rango escribe nunha de oito variables de estado numéricas — catro raios de esquina horizontais e catro verticais para o modo elíptico. O modo unificado reduce as oito nun só control deslizante mediante un axudante setAll que sincroniza todos os valores á vez.
  2. 2
    useMemo ensambla o valor CSS
    Un hook useMemo recalcula a cadea border-radius cada vez que cambia calquera valor de esquina, unidade (px ou %) ou o alternador elíptico. No modo estándar produce a abreviatura de catro valores; co elíptico activado, engade o separador de barra para a sintaxe completa de oito valores — por exemplo, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    O motor CSS do navegador renderiza a vista previa
    A cadea calculada establécese como estilo borderRadius en liña nun elemento div plano. O motor de deseño do navegador fai toda a renderización — non hai canvas, non hai SVG e non hai código de debuxo de terceiros.
  4. 4
    A API Clipboard copia a saída
    Facer clic en Copiar chama a navigator.clipboard.writeText coa declaración CSS (border-radius: ...;) ou coa clase de valor arbitrario equivalente de Tailwind (rounded-[...]), segundo o alternador de formato seleccionado.

Ferramentas relacionadas

🎨

Xerador de sombra CSS

Constructor visual para box-shadow CSS con previsualización en directo, apilamento de múltiples capas, selector de cor, activación de inserción e copia cun clic. Inclúe preaxustes de Material, neumorfismo e brillo.

Próbao
🟦

Xerador de Grid CSS

Deseña visualmente unha grid CSS — pistas, unidades e espazos — e copia o CSS e HTML xerados.

Próbao
↔️

Xerador de Flexbox CSS

Experimenta coa dirección, axuste, xustificación e aliñamento flex en elementos en directo — e copia o CSS.

Próbao

Preguntas frecuentes