Paolo De Feo
a- a+

CSS3 border radius: creare angoli arrotondati

Vediamo come aggiungere angoli arrotondati a vari elementi della nostra pagina web grazie alla proprietà border-radius.

La proprietà CSS3 conosciuta come border-radius permette di aggiungere angoli arrotondati agli elementi pagina quali div, menu, header e altri. Questa proprietà è supportata da Internet Explorer 9, Mozilla Firefox 4 e superiori, Google Chrome, Safari 5 e superiori, Opera.

Il markup di un foglio di stile con tale regola applicata ad un DIV appare grosso modo così:

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 e inferiori */
}

Si noti la sottoregola -moz-border-radius: serve per dire ai browser Mozilla inquadrati in quella versione di renderizzare il contenuto senza problemi. Esistono anche delle codifiche di compatibilità per le versioni più vecchie dei browser, ma la progressiva distribuzione dei nuovi software ci permette di evitarle.

La regola border-radius è davvero flessibile: questo significa che possiamo dare ai nostri elementi pagina anche un aspetto non uniforme, ovvero angolo per angolo. Questo è possibile grazie a 4 proprietà differenti:

border-top-left-radius // angolo superiore sinistro
border-top-right-radius // angolo superiore destro
border-bottom-right-radius // angolo inferiore destro
border-bottom-left-radius // angolo inferiore sinistro

Ecco un esempio CSS chiarificatore:

#Div_Esempio {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

Abbiamo creato in questo caso un rettangolo con angolo inferiore destro arrotondato.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Pier Paolo
Condividi le tue opinioni su questo articolo!