Bordi arrotondati con css o jquery

I bordi arrotondati sono sempre stati un problema, soprattutto per quanto riguarda internet explorer, che fino alla versione 8 è privo di supporto per questa proprietà.

Per gli altri browser è piuttosto semplice, si deve utilizzare coi CSS il border-radius, il -moz e il -webkit. Sono paroloni, ma è più semplice di quanto sembri. Andiamo a vedere come.

Bordi arrotondati con css3

Coi css si può fare in questo modo:

1
2
3

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Sembra una ripetizione, ma usarli tutti e 3 permette di renderlo compatibile con firefox, chrome e safari.
Per avere un aiuto, potete usare questo sito che vi genera il codice in automatico in base ai pixel scelti sull’angolo.

Per il precedente box il css è questo

1
2
3
4
5

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color:#000; color:#fff;
padding:10px; width:150px; margin:auto;

Con explorer, però, non comparirà nessun arrotondamento.

Bordi arrotondati con Jquery Rounded Corners

Ci viene in aiuto una libreria jquery, Rounded Corners.
Scaricate il pacchetto a questo link e inserite il codice per richiamare la libreria

1
2
3

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.2.6")</script>
<script src="jquery.corners.js"></script>

La riga 1 e 2 è per richiamare jquery da google, se avete il file inseritelo direttamente.

Farlo andare è piuttosto semplice.

1
2
3
4
5
6

<script type="text/javascript" language="javascript" src="/source/jquery.corners.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.corner').corners();
});
</script>

Si richiama la funzione che verrà applicata a tutti gli elementi con la classe “corner“. Il div precedente quindi avrà questo codice:

1
2
3
4

<div class="corner" 
 style="background-color:#000; color:#fff; padding:10px; width:150px; margin:auto;">
Questo div ha i bordi arrotondati di 10pixel
</div>

E verrà mostrato così

Per personalizzare i bordi è necessario inserire una stringa come parametro della funzione.

1
2
3
4
5

<script type="text/javascript">
$(document).ready(function(){
	$('.rounded').corners('10px left');
});
</script>

Così farà un bordo di 10px solo a sinistra. Altri parametri di posizionamento sono i seguenti:
top
right
bottom
left
top-left
top-right
bottom-left
bottom-right