Bordi arrotondati con i CSS - GM Multimedia

Vai ai contenuti

Menu principale:

Bordi arrotondati con i CSS

HTML.HTML5.PHP CSS.CSS3.Javascript


          Una delle proprietà dei CSS3 è border-radius. Essa serve ad arrotondare i bordi degli elementi di una pagina, non dovendo così più utilizzare le immagini in background per raggiungere lo scopo di arrotondare i bordi.

Vediamo la sintassi di questa regola:

.angoli_box { border-radius: 10px 10px 10px 10px; }

I valori si riferiscono a:
  1. angolo superiore sinistro;
  2. angolo superiore destro;
  3. angolo inferiore sinistro;
  4. angolo inferiore destro;

Esempio:


DEMO



          Esiste anche una notazione breve che si può usare ne più ne meno come altri tag HTML esempio margin, padding, border.

Esempio:

.amgoli_box { border-radius: 10px; }

Compatibilità con i browser

          Nel momento in cui scrivo la regola sopradescritta, è compatibile solo con Opera e Internet Explorer 9. Tutti gli altri browser non la interpretano ma, ad eccezione di Internet Explorer nelle versioni precedenti alla 9, altri rendono disponibile una versione proprietaria.

Vediamo ora il codice che serve a tutti i browser tranne Internet Explorer nelle versioni precedenti la 9.:
1
2
3
4
5
.border-radius {
border-radius: 10px;
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
}
Codice per Internet Explorer

          Tra le tante tecniche a disposizione su internet ne abbiamo scelto una che fa uso di Javascript poiché la maggior parte delle tecniche che fanno uso del solo CSS sporcano il codice con codice aggiuntivo e/o richiedono almeno un'immagine per funzionare. La tecnica è stata implementata da Cameron Cooke ed è disponibile un'ampia documentazione sul sito ufficiale. In questa guida useremo lo script originale.

Script::
1
2
3
4
5
6
7
8
9
10
11
12
13
addEvent(window, 'load', initCorners);

function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#round"); //#round corrisponde all'id del div
}
          Onde evitare che il codice venga interpretato anche dai browser diversi da IE consigliamo di inserirlo in un commento condizionale così:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--[if IE]>
<script type="text/javascript" src="curvycorners.js"></script>
<script type="text/javascript">
addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
curvyCorners(settings, "#round");
}
</script>
<![endif]-->
Visitatori online:
Sei il nostro visitatore n°:
© - Copyright 2015. - Tutti i diritti riservati - G.M. Multimedia
Torna ai contenuti | Torna al menu