border-radius

Una proprietà a suo tempo richiestissima dai developer è quella che permette di poter impostare una rotondità ai bordi — o per dirla meglio, agli angoli — di un elemento. Con CSS3, quindi, è stata inserita la proprietà border-radius1. I valori che possiamo attribuire sono sempre i soliti, e cioè px, % e em, mentre il funzionamento è analogo a border, con l’eccezione che in questo caso si prendono in considerazione gli angoli e non i bordi.

See the Pen oDJrc by Giovanni Buffa (@gioppy) on CodePen

In questo caso, verrà applicata una rotondità di 5px a tutti e 4 gli angoli di .highlight. Logicamente, esistono anche le singolo proprietà per ogni angolo: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius.

1. border-radius è disponibile solo nei browser più moderni: http://caniuse.com/#search=border-radius