La proprietà CSS border-radius definisce il grado di arrotondamento degli angoli di un elemento. Il Generatore di Border Radius permette di configurare visivamente queste curve, offrendo un controllo immediato sia su forme geometriche standard sia su geometrie asimmetriche e organiche.
Ogni modifica apportata all'interno dell'interfaccia viene elaborata localmente. Ogni angolo viene disegnato direttamente nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.
Funzionamento dei cursori e mappatura degli angoli
Il generatore mappa i quattro angoli principali di un elemento seguendo un ordine orario preciso:
- In alto a sinistra (top-left)
- In alto a destra (top-right)
- In basso a destra (bottom-right)
- In basso a sinistra (bottom-left)
Il valore iniziale del cursore è impostato a 24, il che produce la regola iniziale border-radius: 24px;. I cursori operano su un intervallo numerico che va da 0 a 100.
L'interfaccia si adatta alla modalità di lavoro selezionata:
- Quando l'opzione Collega tutti gli angoli è attiva, un unico cursore denominato Tutti gli angoli modifica contemporaneamente l'intero perimetro.
- Quando l'opzione viene disattivata, compaiono quattro cursori indipendenti: In alto a sinistra, In alto a destra, In basso a destra e In basso a sinistra.
Differenza tra unità in pixel (px) e percentuale (%)
La scelta dell'unità di misura trasforma il comportamento dell'arrotondamento in base alle dimensioni del box:
- Pixel (px): L'angolo viene arrotondato applicando un raggio fisso e costante. La curvatura non risente delle variazioni di larghezza o altezza dell'elemento.
- Percentuale (%): L'arrotondamento si sviluppa in relazione alle dimensioni del box. Il raggio orizzontale si calcola sulla larghezza dell'elemento, mentre il raggio verticale si calcola sulla sua altezza. Questa caratteristica è fondamentale nel design responsivo, poiché la curvatura si adatta dinamicamente al ridimensionamento del contenitore. Se si applica un valore del 50% a tutti gli angoli di un elemento perfettamente quadrato, questo si trasforma in un cerchio.
Geometrie avanzate con la modalità ellittica
Quando l'opzione Angoli ellittici è disattivata, ogni angolo viene trattato come un quarto di cerchio perfetto, definito da un singolo raggio.
Attivando l'opzione Angoli ellittici, ogni angolo riceve due raggi indipendenti:
- Un raggio Orizzontale
- Un raggio Verticale
Questa separazione consente di generare ellissi anziché archi circolari, permettendo la creazione di forme asimmetriche, fluide e organiche, spesso definite "blob" o a goccia.
La sintassi CSS con barra diagonale (slash)
In modalità standard, il CSS generato utilizza la forma abbreviata a uno o più valori lineari. Quando si attiva la modalità ellittica, il generatore scrive automaticamente la sintassi CSS a due valori separati da una barra diagonale (/). I valori che precedono la barra indicano i raggi orizzontali, mentre quelli che la seguono definiscono i raggi verticali. Se si disattiva la modalità ellittica e gli angoli tornano a essere rotondi, il codice torna istantaneamente alla forma abbreviata lineare.
Creazione di cerchi perfetti e pulsanti a pillola
Il generatore permette di strutturare in modo preciso due dei pattern di design più comuni sul web:
Il cerchio perfetto
Per convertire un elemento quadrato in un cerchio:
- Attivare l'opzione Collega tutti gli angoli.
- Impostare l'unità di misura su
%. - Spostare il cursore al valore 50.
Il pulsante a pillola
Per creare un pulsante con i lati perfettamente semicircolari che mantenga la corretta proporzione a qualsiasi larghezza:
- Mantenere l'unità di misura impostata su
px. - Trascinare il cursore dell'angolo oltre la metà dell'altezza complessiva del pulsante. In questo modo, i lati corti rimarranno completamente arrotondati senza distorcersi, indipendentemente da quanto il pulsante si estenda in larghezza.
Utilizzo dei preset di progettazione
I pulsanti di preset consentono di applicare istantaneamente configurazioni geometriche predefinite all'elemento di anteprima:
- Smussato: Azzera i raggi di curvatura per ripristinare gli angoli retti a 90 gradi.
- Arrotondato: Applica una curvatura standard e bilanciata sui quattro angoli.
- Cerchio: Configura automaticamente tutti gli angoli al 50%, trasformando un box quadrato in una figura circolare.
- Blob: Configura raggi ellittici asimmetrici per ottenere una forma fluida e organica.
- Foglia: Combina angoli opposti tesi e arrotondati per simulare il profilo di una foglia.
Il codice risultante viene mostrato sotto l'intestazione CSS ed è pronto per essere copiato tramite il pulsante Copia CSS per essere incollato direttamente nei fogli di stile del proprio progetto.
Domande frequenti (FAQ)
Come funzionano i quattro angoli e la differenza tra px e %?
I quattro cursori corrispondono, in senso orario, agli angoli in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra. In pixel, l'angolo si arrotonda di una quantità fissa; in percentuale, si arrotonda in relazione al box (la percentuale orizzontale segue la larghezza e quella verticale segue l'altezza), per cui il 50% trasforma un quadrato in un cerchio.
A cosa serve la modalità ellittica?
Se disattivata, ogni angolo è un quarto di cerchio con un singolo raggio. Attivandola, ogni angolo ottiene un raggio orizzontale e uno verticale separati, permettendo di creare forme morbide e organiche a "goccia" (blob). Il generatore scrive per Lei la sintassi con lo slash a due valori, per poi tornare alla forma abbreviata quando gli angoli tornano a essere rotondi.
Come posso creare un cerchio perfetto o una forma a pillola?
Colleghi gli angoli, passi alla percentuale e imposti 50%: un quadrato diventerà un cerchio perfetto. Per un pulsante a pillola, mantenga invece i pixel e trascini un angolo oltre la metà dell'altezza del pulsante: i lati rimarranno completamente arrotondati a qualsiasi larghezza. Il preset Cerchio configura il primo caso con un solo clic.