Vai al contenuto principale
LibraTool logoLibraTool

Generatore CSS Border Radius gratis

Progetta visivamente angoli arrotondati con controllo indipendente su ogni angolo. Supporta la sintassi ellittica X/Y per forme organiche.

Funziona offline una volta caricato
border-radius: 20px 20px 20px 20px;
Unità

Usi comuni

  • Forme di Blob OrganicheUtilizza la sintassi ellittica X/Y per creare forme di blob uniche per sezioni hero e illustrazioni.
  • Angoli di Carte e ContenitoriAngoli arrotondati standard per carte, contenitori e pannelli nel moderno design UI.
  • Forme di Avatar e Foto ProfiloCrea lo stile d'angolo giusto per foto profilo: circolare, squircle o quadrato arrotondato.
  • Pillole, Tag e BadgeCostruisci pulsanti pill, tag e badge perfettamente arrotondati con il preset 9999.
  • Progetti d'Angolo AsimmetriciMescola i raggi tra gli angoli per creare forme di carta e pulsante distintive e riconoscibili dal marchio.

Come funziona

Il generatore di border-radius funziona interamente nel browser — non c'è server, non c'è libreria, e nessun caricamento. Costruisce la stringa del valore CSS border-radius direttamente in JavaScript usando lo stato React e useMemo, poi la applica come stile inline su un elemento div dal vivo così il motore CSS del browser stesso rende la forma in tempo reale.

  1. 1
    Gli slider scrivono lo stato
    Ogni input range scrive su una di otto variabili di stato numeriche — quattro raggi angolari orizzontali e quattro verticali per la modalità ellittica. La modalità unificata collassa tutte e otto in un singolo slider tramite un helper setAll che sincronizza ogni valore contemporaneamente.
  2. 2
    useMemo assembla il valore CSS
    Un hook useMemo ricalcola la stringa border-radius ogni volta che cambia un valore d'angolo, l'unità (px o %), o il toggle ellittico. In modalità standard produce la forma abbreviata a quattro valori; con l'ellittico attivo, aggiunge il separatore slash per la sintassi completa a otto valori — ad es. 32px 20px 20px 32px / 20px 32px 20px 32px.
  3. 3
    Il motore CSS del browser rende l'anteprima
    La stringa calcolata è impostata come stile borderRadius inline su un semplice elemento div. Il motore di layout del browser fa tutta la resa — non c'è canvas, non c'è SVG, e nessun codice di disegno di terze parti.
  4. 4
    La Clipboard API copia l'output
    Cliccando Copia si chiama navigator.clipboard.writeText con la dichiarazione CSS (border-radius: ...;) o la classe Tailwind di valore arbitrario equivalente (rounded-[...]), a seconda del toggle di formato selezionato.

Strumenti correlati

🎨

Generatore CSS Box Shadow

Costruttore visivo per CSS box-shadow con anteprima live, sovrapposizione multi-strato, selettore colori, toggle inset e copia con un clic. Include preset Material, neumorfismo e bagliore.

Prova
🟦

Generatore CSS Grid

Progetta visivamente una griglia CSS — tracce, unità e spazi — e copia il CSS e HTML generati.

Prova
↔️

Generatore CSS Flexbox

Sperimenta con direzione flex, wrap, justify e align su elementi dal vivo — e copia il CSS.

Prova

Domande frequenti