Con l’avvento del CSS3 è molto semplice creare dei bordi arrotondati sia ai contenitori che alle immagini. In questa guida voglio mostrarti tutte le tecniche CSS per arrotondare i bordi, come colorare un angolo in modo diverso da un altro.
Arrotondare i bordi di un contenitore
Per smussare gli angoli di un contenitore qualsiasi, come ad esempio potrebbe essere il tag <div></div>, possiamo utilizzare la proprietà del border-radius. Questo attributo è molto intuitivo e semplice da utilizzare, basta scegliere il raggio in pixel del bordo.
Vediamo un esempio di default:
CSS:
div {
border-radius: 5px;
border: 3px solid #0088b3;
}
in questo modo abbiamo chiesto al browser di dare un bordo arrotondato a tutti i tag “div”.
Volendo essere ancora più specifici, possiamo dare un border-radius ad un div avente una specifica classe o id. Per vedere bene la differenza tra lo sfondo della pagina ed il contenitore ho applicato un bordo colorato di blu con un spessore di 3px.
CSS:
.border {
border-radius: 5px;
border: 3px solid #0088b3;
}
Demo:
Puoi aggiungere il CSS in 3 modi:
- All’interno dei tag
<style></style>che a loro volta vanno inseriti all’interno dei tag<head></head>della sorgente HTML. - All’interno di un file esterno (es: style.css) per poi essere richiamato nella sorgente HTML con il seguente codice:
<link rel="stylesheet" href="style.css" type="text/css" /> - Inline CSS, ovvero all’interno del tag stesso, in questo modo:
<div style="border-radius: 5px; border: 3px solid #0088b3;">Testo</div>
Arrotondare i bordi di un’immagine
Prima abbiamo parlato di come arrotondare i bordi di un contenitore, la stessa identica cosa si può fare con le immagini. Solitamente si aggiunge un raggio di pochi pixel (3-5 px) oppure si crea un’immagine rotonda.
Immagine con bordi smussati
In questo primo esempio vedremo come smussare leggermente gli angoli delle immagini che per loro natura saranno quadrate.
CSS:
img {
border-radius: 5px;
}
Demo:
Immagine rotonda
Sempre con lo stesso metodo possiamo rendere completamente rotonda un’immagine. È possibile farlo solo se:
- L’immagine è esattamente quadrata (es: 150x150px)
- L’immagine deve avere un border-radius del 50%
CSS:
img {
border-radius: 50%;
}
Demo:
Per evitare che tutte le immagini presenti all’interno della pagina prendano lo stesso stile, puoi anche in questo caso inserire l’immagine dentro un contenitore oppure una classe dentro il tag <img>.
HTML:
<div class="border">
<img src="images/immagine.jpg" />
</div>
<img class="border" src="images/immagine.jpg" />
I rispettivi stili in CSS sono i seguenti.
CSS:
.border img {
border-radius: 50%;
}
img.border {
border-radius: 50%;
}
Arrotondare gli angoli di una tabella
Per tabella intendo il classico tag <table> dove all’interno sono presenti le righe e le colonne. Anche in questo caso diamo uno spessore di 3px ed un colore blu al bordo per distinguerlo dal background della pagina.
HTML:
<table>
<tr>
<td>ID</td>
<td>Valore</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
CSS:
table {
border-radius: 10px;
border: 3px solid #0088b3;
}
Demo:
| ID | Valore |
| 1 | 2 |
Questo succede quando la tabella NON ha un border-collapse: collapse , se invece stai utilizzando un foglio di stile di base (ad esempio quello di bootstrap), puoi far impostare il border-collpase: initial.
CSS con bottoni dai bordi arrotondati
Dopo aver visto i contenitori, le immagini e le tabelle, possiamo passare all’arrotondamento dei bordi dei bottoni. Stessa e identica procedura, anche qui utilizzeremo il border-radius.
Il bottone solitamente è un elemento grafico che, una volta cliccato sopra, ti porta a compiere un’azione. Solitamente i bottoni si trovano alla fine di un form per inviare dei dati oppure posso essere dei semplici link che ti portano verso un’altra pagina.
Ci sono 3 modi per creare degli elementi che graficamente sembrano e sono dei bottoni:
- con il tag <button>
- con il tag <input type=”submit”>
- con il tag <a>
Creiamo graficamente un bottone con il tag <a>, lo stesso codice CSS potrà essere riutilizzato cambiando il nome del tag oppure inserendo dentro il class “bottone”.
Nell’esempio che ti mostrerò qui sotto, ho aggiunto anche un background grigio chiaro ed un po’ di pixel di spazio al suo interno (padding).
HTML:
<a class="bottone" href="#">clicca qui</a>
CSS:
.bottone {
background: #dddddd;
border-radius: 5px;
padding: 5px 10px;
}
Demo:
Bordi con stile diverso
I bordi di un elemento sono 4: top, right, bottom e left.
Con border-radius stiamo dando una regola generale a tutti e 4 gli angoli, ma come possiamo specificare che vogliamo sotando il bordo sinistro arrotondato di 5px ed il bordo destro di 15px?
HTML:
<div class="border">Esempio di un contenitore con bordi di diverso stile</div>
CSS:
.border {
border-radius: 0 15px 0 5px;
border: 3px solid #0088b3;
}
Mentre nel secondo caso possiamo definire ogni singolo bordo:
.border {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: 3px solid #0088b3;
}
Demo: