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.