Arrotondamento angoli

Applica border-radius: 50% a un elemento quadrato per creare un cerchio perfetto. Imposta tutti e quattro gli angoli al 50%.

Sì, border-radius può avere quattro valori individuali nell'ordine: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra. Questo permette forme asimmetriche uniche.

Da sei a dodici pixel per i pulsanti e da otto a sedici per le schede funziona nella maggior parte delle interfacce. Più del numero esatto conta la coerenza: se pulsanti e campi di input nella stessa schermata hanno raggi diversi, l'insieme appare disordinato. Quando un'immagine sta dentro una scheda, dai all'elemento interno un raggio leggermente minore di quello esterno, altrimenti le due curve stoneranno a vista.

Il 50% significa "metà di ciascun lato", quindi se l'elemento non è quadrato i raggi orizzontale e verticale differiscono e ottieni un'ellisse. Per un cerchio vero, dai a width e height lo stesso valore oppure aggiungi aspect-ratio: 1. Se vuoi la forma a pillola su un pulsante la cui larghezza segue il testo, usa un valore fisso grande come 9999px al posto del 50%: le estremità resteranno semicerchi perfetti a qualunque altezza.