DevToolPal
IT

Generatore di border-radius CSS

Imposta il border-radius CSS angolo per angolo, con angoli ellittici e forme organiche, in px, % o rem, con anteprima dal vivo, preimpostazioni e il CSS più corto da copiare.

Eseguito in locale, mai caricato

Angoli

Unità

Anteprima

CSS

Preimpostazioni
CSS di border-radius
 
 
 
 
 
Cosa fa


Il generatore di border-radius ti permette di modellare gli angoli arrotondati in modo visuale e copiare il CSS più corto. Usa un raggio per tutti gli angoli o uno per ciascuno, attiva gli angoli ellittici per dare a ogni angolo un raggio orizzontale e uno verticale distinti, e guarda l’anteprima cambiare mentre trascini. Funziona in px, %, rem o em, e puoi incollare un valore border-radius esistente per modificarlo. Tutto avviene nel tuo browser.


Come si usa


    

  1. Parti da una preimpostazione o tieni la forma di esempio.
    2. 

  2. Scegli l’Unità. Cambiandola i valori attuali vengono convertiti (rem ed em valgono 16px, % è relativo al riquadro di anteprima).
    3. 

  3. Attiva Stesso raggio per tutti gli angoli per un solo cursore, oppure disattivalo per regolare In alto a sinistra, In alto a destra, In basso a destra e In basso a sinistra separatamente.
    4. 

  4. Attiva Angoli ellittici per avere un cursore Orizzontale e uno Verticale per ogni angolo.
    5. 

  5. Ridimensiona l’anteprima con Larghezza e Altezza, poi copia il codice dalla scheda CSS. Attiva l’output longhand se preferisci quattro proprietà separate.
    6. 



Esempio


.avatar { border-radius: 50%; }
.tab    { border-radius: 12px 12px 0 0; }
.blob   { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }


Buono a sapersi


    

  • Forma più corta. L’output raggruppa i valori uguali: quattro angoli identici diventano un solo valore e la parte dopo la barra sparisce quando tutti gli angoli sono circolari.
    • 

  • Le percentuali seguono il riquadro. Quelle orizzontali si riferiscono alla larghezza dell’elemento, quelle verticali all’altezza: 50% su un rettangolo dà un’ellisse, non un cerchio.
    • 

  • I raggi che non ci stanno vengono ridotti insieme dal browser; per questo un valore enorme in px produce una pillola pulita.
    • 

  • Figli e overflow. Gli angoli arrotondati ritagliano sfondo e bordo, ma non il contenuto dei figli: aggiungi overflow: hidden per ritagliare le immagini dentro il riquadro.
    • 

 
  
 
Domande frequenti
 
 
  › Cosa significa la barra in border-radius?  
I valori prima della barra sono i raggi orizzontali, quelli dopo i raggi verticali. Quando differiscono, l'angolo diventa un quarto di ellisse invece che di cerchio. Per esempio 50% / 30% dà una curva più piatta di 50%.
 
  › In che ordine si scrivono i quattro angoli?  
In senso orario partendo da in alto a sinistra: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Con meno valori il CSS li ripete: due valori impostano alto sinistra/basso destra e alto destra/basso sinistra; tre valori impostano alto sinistra, alto destra/basso sinistra e basso destra.
 
  › Come faccio un cerchio o una pillola?  
border-radius: 50% trasforma un quadrato in cerchio e un rettangolo in ellisse. Per una pillola con estremità tonde a qualsiasi larghezza usa una lunghezza enorme come 9999px: il browser riduce i raggi che non ci stanno, quindi le estremità restano perfettamente tonde.
 
  › Come si creano le forme organiche (blob)?  
I blob usano otto percentuali diverse: quattro raggi orizzontali e quattro verticali, come 30% 70% 70% 30% / 30% 30% 70% 70%. Scegli una preimpostazione blob, attiva Angoli ellittici e trascina i cursori di ogni angolo per rimodellarla.