Un generatore visivo di border-radius
Creare bordi arrotondati perfetti per i tuoi componenti web non dovrebbe costringerti a tirare a indovinare i valori e aggiornare continuamente il browser. Questo generatore visivo di border-radius ti permette di regolare gli slider e vedere subito l'effetto delle curve su un elemento. Una volta ottenuto l'aspetto desiderato, puoi copiare il frammento di codice CSS ottimizzato direttamente negli appunti.
Poiché tutti i calcoli e le anteprime sono gestiti localmente dal tuo browser, lo strumento è incredibilmente veloce e del tutto privato. Nessun dato o clic viene mai caricato su un server.
Padroneggiare i bordi arrotondati in CSS
La proprietà border-radius è un elemento fondamentale del web design moderno, utilizzata per ammorbidire gli spigoli netti di pulsanti, immagini, modali e contenitori di layout. Sebbene sembri semplice, la sintassi può essere sorprendentemente complessa quando si vogliono modificare angoli specifici.
Questo generatore di border-radius CSS ti aiuta a comprendere e utilizzare al meglio la sintassi abbreviata del CSS. Quando colleghi tutti gli angoli, lo strumento restituisce un singolo valore (ad esempio, border-radius: 16px;). Se scolleghi gli angoli per creare una forma personalizzata, il generatore formatta automaticamente il CSS in base ai tuoi input:
- Quattro valori: Se tutti gli angoli sono diversi, il CSS li applica in senso orario partendo dall'angolo in alto a sinistra (es.,
border-radius: 16px 8px 4px 2px;). - Due valori: Se l'angolo in alto a sinistra è uguale a quello in basso a destra, e quello in alto a destra è uguale a quello in basso a sinistra, lo strumento condensa in modo intelligente il codice in due valori (es.,
border-radius: 16px 0;).
Pixel vs Percentuali
Uno dei dilemmi più comuni quando si creano bordi arrotondati in CSS è la scelta dell'unità di misura corretta. Questo strumento ti permette di alternare facilmente tra pixel (px) e percentuali (%), ciascuna con uno scopo ben preciso nel design della UI.
I pixel (px) sono unità assolute. Un border-radius di 12px avrà sempre lo stesso aspetto, che sia applicato a un piccolo pulsante o a un'enorme immagine hero. I pixel sono la scelta standard per i componenti dell'interfaccia come card, menu a tendina e campi di input, poiché mantengono un linguaggio di design coerente e uniforme in tutta l'applicazione. Questo strumento consente valori in pixel fino a 200px.
Le percentuali (%) sono relative alle dimensioni dell'elemento stesso. Un border-radius del 50% su un elemento quadrato creerà sempre un cerchio perfetto, indipendentemente dal fatto che il quadrato sia largo 50 o 500 pixel. Se l'elemento è un rettangolo, il 50% creerà una forma ovale ellittica. Le percentuali sono ideali per elementi responsive come gli avatar dei profili o le forme decorative di sfondo. Questo strumento limita i valori percentuali al 50%, poiché nel CSS valori superiori non aumentano l'effetto visivo di arrotondamento.
Oltre i semplici angoli: un generatore di forme CSS
Sebbene sia usato soprattutto per arrotondamenti leggeri, border-radius è anche un potente generatore di forme CSS. Scollegando gli angoli e combinando valori estremi, puoi creare forme geometriche uniche senza bisogno di file SVG o di complessi clip-path. Lo strumento include diversi preset per dimostrarlo:
- Pillola: Applicando un valore in pixel artificialmente alto (come
9999px) a tutti gli angoli, si crea una forma a "pillola" o a stadio. È molto usata per badge, tag e moderni pulsanti call-to-action. Il browser limita l'arrotondamento effettivo esattamente alla metà dell'altezza dell'elemento, garantendo semicerchi perfetti sui bordi. - Cerchio: Impostando tutti gli angoli al
50%si trasforma un quadrato in un cerchio perfetto. - Foglia: Impostando gli angoli in alto a sinistra e in basso a destra a
0, e quelli in alto a destra e in basso a sinistra a un valore alto (come48px), si crea una forma a foglia asimmetrica e organica. - Tab: Arrotondando solo gli angoli in alto a sinistra e in alto a destra (es.
16px) e lasciando quelli in basso a0, si crea la classica forma a linguetta, perfetta per i menu di navigazione.
Perfeziona i tuoi componenti UI
Gli angoli arrotondati vengono usati raramente da soli; di solito fanno parte di un design system più ampio e coeso. Un componente card ben progettato, ad esempio, unisce un border radius leggero a profondità e colore per risaltare sulla pagina.
Una volta generato il border radius ideale, puoi combinarlo con altri effetti CSS per completare il tuo design. Prova ad abbinare la tua nuova forma a una leggera ombra usando il nostro Generatore di Box Shadow per creare un effetto sollevato e fluttuante. Se stai definendo lo stile di un pulsante o di un elemento decorativo di sfondo, puoi applicare uno sfondo vivace usando il Generatore di Gradienti CSS, oppure trovare i colori a tinta unita complementari perfetti con il Generatore di Palette Colori.