Generatore CSS Border Radius

I pixel danno una dimensione della curva fissa indipendentemente dalle dimensioni dell'elemento. Le percentuali scalano in base alle dimensioni dell'elemento — "50%" su un quadrato di 100px dà un raggio di 50px. Usa px per pulsanti e card con dimensioni coerenti. Usa % per forme che devono scalare proporzionalmente, come cerchi o pulsanti a pillola.

Scollega gli angoli usando il toggle di collegamento, poi regola individualmente il cursore di ciascun angolo. La forma abbreviata CSS per quattro valori è: border-radius: alto-sinistra alto-destra basso-destra basso-sinistra (in senso orario dall'angolo in alto a sinistra).

Un valore: "border-radius: 16px". Quando le coppie alto-sinistra/basso-destra e alto-destra/basso-sinistra sono uguali: "border-radius: 10px 20px". Lo strumento genera sempre la forma abbreviata più concisa.

La forma a pillola ha le estremità completamente arrotondate su un elemento rettangolare. Imposta un border-radius molto grande (tipicamente "9999px" o "50%"). Il browser limita il raggio alla metà della dimensione più corta, producendo semicerchi su ciascuna estremità. Usa il preset Pillola in questo strumento.

Lo strumento supporta px e % come opzioni di unità. Se hai bisogno di em o rem, annota il valore in pixel e converti manualmente. La proprietà border-radius accetta qualsiasi unità di lunghezza CSS valida (px, em, rem, %, ecc.).

Sì. border-radius ritaglia l'intero box, incluse le immagini di sfondo. Se gli elementi figlio fuoriescono dagli angoli arrotondati, aggiungi "overflow: hidden" per ritagliarli. L'arrotondamento si applica in modo coerente allo sfondo, al bordo e al box-shadow.

No. Tutto viene eseguito nel tuo browser tramite JavaScript. Nulla lascia il tuo dispositivo.