Generatore CSS border-radius

Crea una forma in tre passaggi

1. Imposta larghezza e altezza tra 1 e 2000 pixel CSS. Inserisci i raggi orizzontale e verticale di ogni angolo in px o %, oppure applica l’angolo in alto a sinistra a tutti.
2. Esamina l’anteprima adattata. Le percentuali orizzontali usano la larghezza e quelle verticali l’altezza; cambiare unità conserva il numero ma ne cambia il significato.
3. Scegli Solo raggio o CSS del riquadro e copia il risultato completo. Se la copia non è disponibile, seleziona il testo di sola lettura. I campi non validi eliminano il risultato corrente.

I due raggi di ogni angolo

Ogni angolo ha un raggio orizzontale e uno verticale. La barra in border-radius separa quattro valori orizzontali da quattro verticali, nell’ordine alto sinistra, alto destra, basso destra, basso sinistra.

Le percentuali orizzontali usano la larghezza, quelle verticali l’altezza. Su un rettangolo il 50% in entrambe le direzioni produce un’ellisse, non necessariamente un cerchio. Una componente zero rende l’angolo squadrato.

Quando raggi adiacenti si sovrappongono su un lato, il browser riduce tutte le otto componenti con un fattore comune. I pixel risolti e usati descrivono questo riquadro; i valori arrotondati non sostituiscono il CSS originale.

L’anteprima dispone il riquadro alle dimensioni dichiarate prima di adattarlo visivamente. Il solo raggio può produrre un risultato diverso su un riquadro di altre dimensioni. Il CSS del riquadro aggiunge dimensioni, border-box e bordo e padding nulli, senza i colori dell’anteprima.

Esempi con unità miste

Su un riquadro 240 per 120, i valori orizzontali 75%, 120px, 20%, 30px e verticali 40px, 60%, 60px, 50% danno un fattore comune di 0,8. I raggi superiori diventano 144 e 96px e anche le altre componenti vengono ridotte.

Con gli stessi valori su un riquadro 120 per 240, il fattore limitante è 4/7. La forma cambia senza convertire le percentuali in pixel fissi.

Su un riquadro 240 per 120, raggi del 50% nelle due direzioni corrispondono a 120 e 60px. Tutti i raggi a zero lasciano angoli squadrati.

Ambito e interpretazione

L’editor accetta raggi non negativi fino a 4000px o 1000%, con al massimo tre decimali. Non interpreta CSS arbitrario, calc(), var(), angoli logici o altre unità.

Usa un punto o una virgola decimale, senza separatori delle migliaia. Cambiare unità conserva il numero, non la lunghezza risolta. Campi vuoti, incompleti o non validi eliminano anteprima e copia correnti.

Pixel usati e fattore sono spiegazioni arrotondate per questo riquadro. Il rendering può arrotondare i subpixel; il CSS copiato conserva valori e unità originali.

L’adattamento cambia solo la visualizzazione, non il riquadro logico né la regola esportata. Su un altro riquadro il browser ricalcola percentuali e riduzione.

Il raggio modella sfondo o bordo, ma non ritaglia sempre i contenuti figli. Non sono inclusi caricamento immagini, trascinamento, animazione o regole overflow.

Stili locali senza bozze salvate

Lo strumento non aggiunge caricamenti, cronologia, collegamenti o richieste contenenti le impostazioni. La copia è esplicita. Servizi esistenti, estensioni e copie personali non sono coperti da una promessa generale di cancellazione.