Generatore di Border Radius CSS
Generatore visuale di border-radius CSS. Regola ogni angolo indipendentemente con anteprima in tempo reale e copia il codice CSS istantaneamente.
Cos'è CSS border-radius?
CSS border-radius è una proprietà che arrotonda gli angoli del bordo esterno di un elemento. Puoi impostare ogni angolo indipendentemente usando da uno a quattro valori.
Come creo un cerchio perfetto con border-radius?
Imposta border-radius al 50% su un elemento quadrato (larghezza e altezza uguali). Per un ellisse, usa border-radius: 50% su un elemento rettangolare.
Quali unità posso usare per border-radius?
Border-radius accetta px, %, em, rem, vw, vh e altre unità di lunghezza CSS. Le percentuali sono relative alle dimensioni dell'elemento.
Qual è la sintassi abbreviata per border-radius?
L'abbreviazione segue il modello: in-alto-sinistra in-alto-destra in-basso-destra in-basso-sinistra. Un valore si applica a tutti gli angoli. Due valori impostano in-alto-sinistra/in-basso-destra e in-alto-destra/in-basso-sinistra.
Posso creare angoli ellittici?
Sì, usando la sintassi con slash (/) puoi definire raggi orizzontali e verticali separati. Ad esempio, border-radius: 50% / 100px crea una curva ellittica.
Border-radius funziona su tutti gli elementi?
Border-radius funziona sulla maggior parte degli elementi HTML inclusi div, button, img e input. Tuttavia, potrebbe non ritagliare il contenuto in overflow senza overflow: hidden.
Posso creare forme complesse con border-radius?
Sì, combinando diversi valori di raggio per ogni angolo, puoi creare pillole, ovali, foglie e forme organiche personalizzate.
Border-radius è supportato in tutti i browser?
Sì, border-radius è supportato in tutti i browser moderni inclusi Chrome, Firefox, Safari, Edge e browser mobili.
Come creo un pulsante a forma di pillola?
Imposta border-radius a un valore uguale o superiore alla metà dell'altezza dell'elemento. Per un pulsante alto 40px, usa border-radius: 20px o superiore.
Border-radius influenza le immagini di sfondo?
Sì, border-radius ritaglia lo sfondo, l'immagine di sfondo e il bordo di un elemento. Lo sfondo segue automaticamente gli angoli arrotondati.
Posso animare border-radius?
Sì, border-radius è animabile con transizioni e animazioni CSS. Puoi transitare fluidamente tra diversi valori di raggio.
Posso usare border-radius con le trasformazioni CSS?
Sì, border-radius funziona bene con le trasformazioni CSS come rotate, scale e translate.
Come creo un cerchio con bordo?
Applica border-radius: 50% a un elemento quadrato con larghezza e altezza uguali, poi aggiungi una proprietà border.
Qual è la differenza tra proprietà individuali e abbreviazione?
Le proprietà individuali come border-top-left-radius ti danno controllo preciso su ogni angolo. L'abbreviazione ti permette di impostare più angoli in una dichiarazione.
Come usare Generatore di Border Radius CSS
Disegna gli angoli arrotondati in modo visuale con questo generatore di CSS border-radius. Tutto gira in locale nel tuo browser e nessun dato viene caricato.
- Scegli px, %, em o rem nel menu a tendina Unit.
- Trascina i cursori Top Left, Top Right, Bottom Right e Bottom Left per arrotondare ogni angolo singolarmente.
- Attiva Link all corners per applicare lo stesso valore a tutti e quattro gli angoli.
- Copia il CSS generato dall'anteprima e incollalo nel tuo foglio di stile.
Il 50% su tutti gli angoli crea un cerchio o una pillola perfetta; con em o rem il raggio scala insieme alla tipografia.
Strumenti correlati
- Generatore Box Shadow CSS Generatore online gratuito di box-shadow CSS. Crea visivamente ombre bellissime con offset, sfocatura, diffusione, colore e inset regolabili. Anteprima live e copia codice istantanea.
- Generatore Gradienti CSS Crea stupendi gradienti CSS visivamente. Genera gradienti lineari, radiali e conici con più punti di colore, angoli e posizioni. Copia istantaneamente codice CSS pronto per la produzione.
- Generatore CSS Grid Generatore CSS Grid visuale gratuito con anteprima dal vivo. Progetta layout a griglia responsive interattivamente ed esporta codice CSS pronto per la produzione.
- Generatore CSS Flexbox Generatore CSS Flexbox visuale con anteprima dal vivo. Regola le proprietà flex e ottieni codice CSS pronto all'uso.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore di Easing CSS Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
- Generatore Text Shadow CSS Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.