Generatore CSS Border Radius
Progetta visivamente il border-radius e ottieni codice CSS pronto all'uso
Controlli Border Radius
Anteprima dal Vivo
Output CSS
Esempi di Utilizzo
Cerchio Perfetto
Crea un elemento perfettamente rotondo con border radius del 50% su tutti gli angoli.
Forma a Pillola
Progetta un pulsante a forma di pillola con grandi valori di border radius orizzontale.
Forma Organica
Crea forme organiche uniche impostando valori diversi per ogni angolo.
Funzionalita
Anteprima Visiva dal Vivo
Vedi l'effetto del border radius aggiornarsi in tempo reale mentre regoli i cursori
Controllo Individuale degli Angoli
Regola ogni angolo in modo indipendente o collegali tutti per un border radius uniforme
Forme Preimpostate
Accesso rapido a forme comuni come cerchio, pillola, rettangolo arrotondato e personalizzato
Privacy Prima di Tutto
Tutto funziona nel tuo browser — nessun dato viene inviato a nessun server
Come Usare?
Regola gli Angoli
Usa i cursori per impostare il border radius di ogni angolo, o attiva la modalita collegamento per valori uniformi.
Anteprima della Forma
Osserva il box di anteprima aggiornarsi istantaneamente quando cambi i valori del raggio.
Copia il CSS
Clicca il pulsante Copia CSS per copiare il codice border-radius generato negli appunti.
Domande Frequenti
Cosa fa questo strumento?
Questo generatore di border-radius ti permette di progettare visivamente angoli arrotondati per qualsiasi elemento CSS. Trascina i cursori, guarda l'anteprima aggiornarsi in tempo reale e copia il codice CSS generato con un clic. Basta indovinare valori nel foglio di stile.
Come funziona border-radius in CSS
La proprieta CSS border-radius accetta valori in pixel, percentuali o em per ogni angolo. Puoi impostare tutti e quattro gli angoli insieme con la forma abbreviata (border-radius: 10px) o controllarli singolarmente. Le percentuali sono relative alle dimensioni dell'elemento, ecco perche 50% su un quadrato crea un cerchio.
Forme preimpostate e design personalizzati
Parti subito con i preset per cerchi, pillole e rettangoli arrotondati. Oppure sperimenta con valori asimmetrici su ogni angolo per creare forme organiche tipo blob, molto di tendenza nel design di interfacce moderne.
Compatibile con tutti i browser moderni
La proprieta border-radius e supportata da Chrome, Firefox, Safari ed Edge. La sintassi abbreviata generata da questo strumento e il formato piu compatibile e puo essere incollata direttamente nel tuo progetto senza prefissi vendor.