Vés al contingut principal
LibraTool logoLibraTool

Generador de border-radius CSS de franc

Dissenya cantonades arrodonides visualment amb control independent de cada cantonada. Admet la sintaxi el·líptica X/Y per a formes orgàniques de blob.

Funciona sense connexió un cop carregat
border-radius: 20px 20px 20px 20px;
Unitat

Usos habituals

  • Formes de Blob OrgànicUtilitzeu la sintaxi el·líptica X/Y per crear formes de blob úniques per a seccions hero i il·lustracions.
  • Cantonades de Targeta i ContenidorCantonades arrodonides estàndard per a targetes, contenidors i panells en disseny UI modern.
  • Avatar & Formes de Foto de PerfilCreeu l'estil de cantonada correcte per a fotos de perfil: circular, squircle o quadrat arrodonit.
  • Píndoles, Etiquetes i InsígniesCreeu botons de píndola perfectament arrodonits, etiquetes i insígnies amb el preset 9999.
  • Dissenys de Cantonada AsimètricaBarregeu radis entre cantonades per crear formes de targeta i botó distintes i reconeixibles per la marca.

Com funciona

El generador de border-radius s'executa completament al navegador — no hi ha servidor, ni biblioteca, ni pujada. Construeix la cadena del valor CSS border-radius directament en JavaScript utilitzant l'estat de React i useMemo, i després l'aplica com a estil en línia en un element div en directe perquè el propi motor CSS del navegador renderitzi la forma en temps real.

  1. 1
    Els controls lliscants escriuen l'estat
    Cada control d'entrada de rang escriu en una de vuit variables d'estat numèriques — quatre radis de cantonada horitzontals i quatre de verticals per al mode el·líptic. El mode unificat col·lapsa totes vuit en un únic control lliscant a través d'un ajudant setAll que sincronitza tots els valors alhora.
  2. 2
    useMemo assembla el valor CSS
    Un hook useMemo torna a calcular la cadena border-radius cada vegada que canvia qualsevol valor de cantonada, unitat (px o %), o el commutador el·líptic. En mode estàndard produeix l'abreviatura de quatre valors; amb l'el·líptic activat, afegeix el separador de barra per a la sintaxi completa de vuit valors — per exemple, 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    El motor CSS del navegador renderitza la previsualització
    La cadena calculada s'estableix com a estil borderRadius en línia en un element div senzill. El motor de disseny del navegador fa tota la renderització — no hi ha canvas, ni SVG, ni codi de dibuix de tercers.
  4. 4
    L'API Clipboard copia la sortida
    Fer clic a Copia crida navigator.clipboard.writeText amb la declaració CSS (border-radius: ...;) o la classe de valor arbitrari equivalent de Tailwind (rounded-[...]), segons el commutador de format seleccionat.

Eines relacionades

🎨

Generador de box-shadow CSS

Constructor visual per a box-shadow CSS amb previsualització en viu, apilament de múltiples capes, selector de color, commutador d'inserció i còpia amb un clic. Inclou presets de Material, neumorfisme i resplendor.

Prova-ho
🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho
↔️

Generador de CSS Flexbox

Experimenta amb direcció flex, wrap, justify i align en elements en viu — i copia el CSS.

Prova-ho

Preguntes freqüents