Come generare una dichiarazione CSS border-radius con quattro angoli

Inserisci i quattro valori degli angoli, scegli l’unità e genera la dichiarazione CSS border-radius. I valori vengono riportati nell’ordine superiore sinistro, superiore destro, inferiore destro e inferiore sinistro.

A cosa serve e quando usarlo

Per chi sviluppa interfacce web in Italia, impostare gli angoli arrotondati può diventare scomodo quando i quattro angoli non devono avere lo stesso valore. Questo strumento genera una dichiarazione CSS border-radius a partire da quattro valori separati e da un’unità selezionabile.

Puoi usarlo per preparare rapidamente una dichiarazione uniforme, asimmetrica o con valori pari a zero. L’ordine dei campi è importante: il risultato segue la sequenza angolo superiore sinistro, superiore destro, inferiore destro e inferiore sinistro. Se lasci vuoti i valori degli angoli, viene usato 10; se ometti l’unità, viene usata px.

Procedura

1. Apri lo strumento e individua i quattro campi dedicati agli angoli. Inserisci il valore per l’angolo superiore sinistro, poi quello per l’angolo superiore destro, quindi per l’angolo inferiore destro e infine per l’angolo inferiore sinistro.

2. Scegli l’unità da applicare ai valori. L’unità fornita viene aggiunta a ciascun valore nella dichiarazione generata. Per esempio, usando px, ogni valore sarà espresso in pixel; il testo dell’unità selezionato viene riportato nel risultato.

3. Se vuoi una forma uniforme, inserisci lo stesso valore nei quattro campi. Per una forma asimmetrica, assegna un valore diverso a ciascun angolo. Puoi anche usare il valore zero per uno o più angoli.

4. Lascia vuoto un campo solo quando vuoi ricorrere al valore predefinito di quell’angolo, pari a 10. Se non selezioni un’unità diversa, viene usata px.

5. Avvia la generazione e copia la dichiarazione border-radius prodotta nel punto del foglio di stile in cui definisci lo stile dell’elemento. Controlla che l’ordine dei quattro valori corrisponda all’ordine dei campi compilati.

Come leggere il risultato

Il risultato è una singola dichiarazione CSS border-radius per gli angoli arrotondati. I quattro valori compaiono nell’ordine superiore sinistro, superiore destro, inferiore destro e inferiore sinistro; perciò puoi riconoscere quale parte dell’elemento controlla ciascun valore.

Se il risultato non riflette l’effetto desiderato, verifica prima la corrispondenza tra campi e angoli e poi l’unità applicata. Un valore uniforme produce angoli uguali, mentre valori diversi producono una configurazione asimmetrica. Un valore zero rappresenta un angolo senza arrotondamento per quella posizione.

Lo strumento genera la dichiarazione border-radius: non è un foglio di stile completo e non definisce altre proprietà dell’elemento. I valori e il testo dell’unità vengono riportati nella dichiarazione generata; questo articolo non attribuisce allo strumento controlli aggiuntivi sui valori o sulle unità.

Esempio pratico

Stai preparando una scheda con un arrotondamento diverso su ciascun angolo e vuoi trasferire rapidamente la dichiarazione nel foglio di stile.

Inserisci 8, 12, 16 e 20 nei campi degli angoli, scegli px e avvia la generazione.

Il risultato ha la forma di una dichiarazione border-radius con quattro valori seguiti dall’unità scelta, nello stesso ordine dei quattro campi.

Limiti

• Il risultato è una dichiarazione border-radius con i valori e l’unità forniti; non rappresenta un foglio di stile completo e non definisce altre proprietà CSS.

Errori comuni

• Un errore frequente è confondere l’ordine dei campi e ottenere angoli arrotondati nella posizione sbagliata. Correggi i quattro valori seguendo la sequenza superiore sinistro, superiore destro, inferiore destro e inferiore sinistro, quindi genera di nuovo la dichiarazione.

Domande frequenti

Posso usare quattro valori diversi per border-radius?

Sì, puoi ottenere angoli diversi inserendo un valore separato per ciascuna posizione. Il risultato mantiene l’ordine superiore sinistro, superiore destro, inferiore destro e inferiore sinistro.

Quali valori usa lo strumento quando lascio i campi vuoti?

Se ometti i valori degli angoli, ciascuno assume 10. Se ometti l’unità, viene usata px.

Posso impostare a zero uno degli angoli?

Sì, puoi inserire zero per uno o più angoli. La dichiarazione generata riporta quel valore insieme all’unità fornita.