Generatore Border Radius CSS Gratis: Angoli Arrotondati Visuale

A border-radius: 50% su elemento quadrato.

A Sì, ogni angolo ha il suo valore.

A Fare clic sul pulsante 'scollega' disconnette i controlli dei singoli angoli. Ciò significa che puoi regolare il raggio di un angolo senza influenzare gli altri. Vedrai i quattro campi di input diventare indipendenti. È utile per creare design asimmetrici.

A Sì, puoi passare da pixel a percentuali nel generatore. Le percentuali sono relative alle dimensioni dell'elemento, non al raggio stesso. Un valore del 50% su una scatola larga 200px crea un raggio di 100px agli angoli. Questo conta molto per layout responsivi dove la dimensione degli elementi cambia. Usa le percentuali quando il tuo design deve adattarsi fluidamente a schermi diversi.

A Se hai usato pixel, il raggio resta fisso indipendentemente dalle dimensioni dello schermo. Su un telefono, un raggio di 40px sembra enorme rispetto al desktop. Passa alle percentuali: si adattano all'elemento. Per esempio, 10% rimane proporzionale, sia che il tuo bottone sia largo 150px o 300px. Prima testa il progetto nell'anteprima responsive del generatore.

A Questo generatore produce proprietà CSS standard, non proprietà personalizzate come `--radius: 20px`. Dovresti manualmente racchiudere l'output in una chiamata `var()` nel tuo foglio di stile. Incolla il codice, sostituisci il valore con `var(--mio-raggio)`. Lo strumento è pensato per regolazioni visive rapide — per variabili CSS, copia i valori da solo. Ci vogliono circa 30 secondi.

A Gli angoli arrotondati sfruttano l'accelerazione GPU nei browser moderni, quindi sono più veloci di ombre o gradienti complessi. Ma impilare dozzine di elementi con border-radius su un vecchio telefono scarica la batteria. Ho visto freelancer mettere 50+ card arrotondate in una singola pagina — è lì che noti il rallentamento. Tieniti sotto i 30 elementi con raggi inferiori a 20px per Android economici. Prova su un Moto G del 2019 per sicurezza.

A No, nessuna scorciatoia per quello. Devi cliccare sul pulsante di reset o impostare ogni angolo a zero manualmente. Ho visto freelance perdere dieci minuti a regolare angoli che volevano resettare — basta cliccare sull’icona di reset in alto a destra. Cancella tutti i campi all’istante.

A Solo se l'elemento è un quadrato perfetto e imposti tutti gli angoli al 50%. Su un box 200x200px, border-radius: 50% crea un cerchio reale. Ma su un rettangolo 300x200px, il 50% produce un ovale — i raggi orizzontale e verticale sono diversi. Il generatore lo mostra in tempo reale: trascina un cursore d'angolo su un box rettangolare. Vedrai trasformarsi in una forma a pillola quando tutti e quattro gli angoli raggiungono il 50%. Non è un bug, è così che funziona la matematica dei CSS.

A È esattamente a questo che serve il pulsante di scollegamento. Cliccalo per separare i quattro angoli, poi imposta in alto a sinistra e in basso a destra il raggio desiderato tenendo gli altri due a 0. Per un effetto foglia su un pulsante largo 120px, prova 60px su quegli angoli diagonali. Otterrai un contorno a goccia morbido. L'anteprima si aggiorna all'istante, quindi muovi i cursori finché la forma non sembra naturale. Se ti perdi, l'icona di reset riporta tutto a zero.