Generatore di border-radius CSS

Funzionalità di Generatore di border-radius CSS

• 01

  Modalità uniforme e per-angolo

  La modalità uniforme applica un raggio a ogni angolo. La modalità per-angolo controlla indipendentemente l'angolo in alto a sinistra, in alto a destra, in basso a destra e in basso a sinistra — forme di pillola, foglia e etichetta asimmetriche sono a pochi clic di distanza.

• 02

  Angoli ellittici (X/Y)

  Attiva/disattiva la modalità ellittica per specificare un raggio orizzontale e verticale per angolo — la sintassi che CSS supporta per le forme blob organiche.

• 03

  Tre unità

  Passa tra px, % e rem. I valori in percentuale creano vere ellissi che si ridimensionano con la scatola; i valori rem seguono la dimensione del carattere radice per l'accessibilità.

Domande frequenti su Generatore di border-radius CSS

Qual è la differenza tra px e %?

I raggi in pixel sono assoluti — un angolo di 16px è sempre 16px. I raggi in percentuale sono relativi alla larghezza e all'altezza dell'elemento, quindi il 50% crea un cerchio perfetto su una scatola quadrata e un'ellisse su un rettangolo.

Quando devo usare la modalità ellittica?

Usa la modalità ellittica quando vuoi un angolo che sporgere più su un asse — ad esempio una pillola orizzontale (50%/100%) o una forma blob a forma di foglia. CSS lo esprime come `angolo-superiore-sinistro-x angolo-superiore-destro-x ... / angolo-superiore-sinistro-y angolo-superiore-destro-y ...`.

Perché il mio raggio percentuale sembra sbagliato su una scatola non quadrata?

Le percentuali su border-radius sono relative al lato corrispondente: percentuali orizzontali alla larghezza, verticale all'altezza. Su una scatola larga e corta, ciò significa che gli angoli si allungano in ellissi, non in archi perfetti.

L'output funziona in tutti i browser?

Sì — border-radius e la sintassi ellittica sono supportati in tutti i browser moderni, incluse tutte le versioni evergreen di Safari, Firefox, Edge e Chrome.