Come funziona il generatore border-radius CSS
Il generatore accetta fino a otto valori per il border-radius: quattro per l'asse orizzontale e quattro per quello verticale, corrispondenti a ciascun angolo dell'elemento. Puoi inserire manualmente i valori desiderati oppure utilizzare le modalità casuale e 'fancy' per creare rapidamente blob organici.
Il codice CSS prodotto segue la sintassi avanzata: border-radius: h1 h2 h3 h4 / v1 v2 v3 v4. Questa struttura permette la creazione di forme asimmetriche, con angoli e curve personalizzate. Una volta configurati i valori, puoi vedere l'anteprima in tempo reale grazie al rendering diretto del browser.
Unità e scalabilità: pixel vs percentuale
Puoi scegliere tra unità in pixel (px) o percentuali (%). I pixel determinano un valore fisso indipendente dalla dimensione dell'elemento, mentre le percentuali permettono al border-radius di adattarsi dinamicamente. Questo è particolarmente utile nei layout responsivi, perché le curve cambiano proporzionalmente quando l'elemento viene ridimensionato.
Sperimentare con le unità aiuta a ottenere l'effetto desiderato; ricorda che radii troppo grandi sono automaticamente limitati dal browser a metà del lato più corto, per evitare distorsioni.
Blob organici e compatibilità
Le modalità casuale e 'fancy' generano valori border-radius che danno vita a forme organiche e irregolari, ideali per elementi decorativi o interattivi. Gli algoritmi operano localmente nel browser, garantendo privacy e rapidità senza upload.
Il CSS generato è compatibile con tutti i browser moderni, ma la resa visiva dipende dalle regole di clamping: radii oltre il limite sono ridotti automaticamente. Non è possibile esportare immagini o SVG, né gestire forme fuori dai limiti della proprietà border-radius.
Domande frequenti
Come si usa la sintassi border-radius a otto valori?
Puoi inserire quattro valori per l'asse orizzontale e quattro per quello verticale, separati da uno slash (<code>/</code>). Questo ti permette di creare angoli diversi tra loro, generando forme asimmetriche uniche.
Qual è la differenza tra unità pixel e percentuale?
I pixel sono valori fissi e non si adattano quando l'elemento cambia dimensione. Le percentuali, invece, scalano in modo dinamico, perfette per layout responsivi dove le curve si modificano automaticamente.
Perché il blob cambia aspetto quando ridimensiono l'elemento?
Se usi le percentuali, il border-radius si ridimensiona in proporzione. Inoltre, il browser limita i valori massimi per evitare curve distorte, adattando automaticamente la forma alle dimensioni dell'elemento.
È possibile animare tra diverse forme blob con il CSS?
Sì, puoi animare i valori border-radius tramite le proprietà di transizione o animazione CSS. Ricorda che l'effetto dipende dal browser e dai valori usati, ma il codice generato è compatibile.
Come vengono generati i valori casuali o fancy?
Gli algoritmi calcolano valori irregolari direttamente nel browser, creando curve organiche senza inviare dati all'esterno. Puoi rigenerare i blob in modo rapido e sicuro.
Il CSS generato funziona su tutti i browser?
Sì, il codice border-radius è pienamente supportato dai browser moderni. Tuttavia, l'aspetto finale può variare in base alle regole di clamping e alle dimensioni dell'elemento.
Qualcosa non va o hai un'idea per questo strumento? Scrivici