Web e Code Script visite 586

Come smussare angoli di immagini e div con CSS3 Border Radius

1 min

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca agli utenti di browser moderni. Una novità che sta prendendo decisamente piede dopo questi ultimi cambiamenti è il border radius.

Prima per arrotondare immagini e div utilizzavamo immagini (spesso utilizzate come sfondo) realizzate attraverso i programmi di grafica, ora invece non ce n’è più bisogno, bastano poche righe di codice per ottenere il medesimo risultato, ossia smussare gli angoli.

Come arrotondare gli angoli di un div (ma anche di una img)? Appunto attraverso la proprietà border-radius, costruita pensando anche ai browser più datati.

#nomeDiv {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 15px;
}

Nell’ordine si parla dell’angolo in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.

Questo invece è ciò che succede se il raggio del border radius è identico per i quattro angoli:

#nomeDiv {
border-radius: 5px;
}

Per quanto riguarda la compatibilità del border radius con i vari browser Opera 10,5 e Internet Explorer 9 non necessitano di una proprietà con prefisso. Firefox e Safari invece necessitano di una piccola accortezza, per cui il codice diviene questo:

#nomeDiv {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

border-radius-css3

Il tool online per il Border Radius

Questo è ciò che riguarda la teoria. Conoscerla è sempre importante anche se ormai online c’è un tool per ogni cosa. A voi pigroni quindi consiglio un sito dedicato che fa il lavoro sporco al posto vostro. Come si chiama il sito? Indovinate un po’? Border-radius.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo.
Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.
Condividi l'articolo
Se questo articolo ti è piaciuto, ti chiedo solo di condividerlo sui social.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e Code Script

Le migliori icone Flat Design per i tuoi siti internet

2 minIl flat design (design piatto), ispirato allo stile minimal, si sta diffondendo…

webdesign

Web e Code Script

Come alleggerire file png online

1 min Sul filone dello scorso articolo che parlava dell’importanza della velocità del…

webdesign

Web e Code Script

Facebook Like e Send Button in 108 lingue

2 min All’interno di questa pagina potete trovare tutti i plugin per fare…