Angoli arrotondati con i CSS3

Scritto da Gianluca in Guide



Negli ultimi tempi, sul web si vedono sempre più spesso siti internet che utilizzano gli angoli arrotondati (o raunded corners) nei propri layout; questo per dare all’interfaccia di un sito un aspetto “più gradevole“.

Ci sono vari metodi che permettono di creare angoli arrotondati per i box del proprio sito web, di seguito andrò ad esporvi quelle che a mio avviso sono le soluzioni migliori.

Angoli arrotondati utilizzando immagini di sfondo

Questa è da molti anni la tecnica più utilizzata per creare angoli arrotondati, e permette di creare sia box a larghezza fissa che box fluidi (ovviamente, con angoli arrotondati).

Potete trovare una valida guida su come dare “un tocco di rotondità” ai box del vostro sito su html.it.

Per chi ha poca dimestichezza con html e css, sul web si trovano anche dei tool completamente gratuiti che permettono di creare il codice (html + css), da inserire sul proprio sito web, che permette di avere gli angoli arrotondati per i propri box. Eccone un esempio.

Angoli arrotondati utilizzando i CSS3

Questa, a mio avviso, è sicuramente la tecnica più valida per avere angoli arrotondati.

Grazie alle nuove specifiche CSS3, sempre più supportate dai vari browser di ultima generazione, è possibile creare l’effetto degli angoli arrotondati senza l’utilizzo di immagini di sfondo.

Più nello specifico, la proprietà che ci permette di avere dei bordi arrotondati senza l’ausilio di background è border-radius.

Attualmente border-radius è supportato soltanto da Safari, Chrome e FireFox, ma presto anche Opera e Internet Explorer si adegueranno al supporto dei CSS3, o perlomeno delle principali proprietà dei CSS3, e border-radius è una di queste; viene applicata usando i corrispettivi css3:  -webkit-border-radius (per Safari) e -moz-border-radius (per FireFox e Chrome).

Alla propietà border-radius possono essere applicati due valori: il primo rappresenta il raggio orizzontale ed il secondo il raggio verticale.

Inoltre, questa proprietà può essere applicata anche ad un singolo angolo specifico:

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 sull’utilizzo della regola css border-radius:

border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Se, invece, non viene specificato nessun bordo e viene utilizzato un colore di sfondo (background-color), sarà lo sfondo stesso ad avere gli angoli arrotondati:

background-color: #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;

Ecco un esempio sull’utilizzo della regola css border-radius su un singolo angolo (inferiore sinistro, in questo caso):

border: 5px solid #000;
border-bottom-left-radius: 25px;
-moz-border-bottom-left-radius: 25px;
-webkit-border-bottom-left-radius: 25px;

Trovate ulteriori informazioni sulla gestione degli angoli arrotondati tramite CSS sul sito W3C Shools (in inglese).

In realtà esistono altri metodi per la creazione degli angoli arrotondati, tipo l’utilizzo di Java Script specifici; ma preferisco non usarli sia per una questione di rallentamento della pagina web sia per una questione di maggiore difficoltà nella personalizzazione degli stessi.

Altri articoli che potrebbero interessarti:

Gianluca

Appassionato di informatica fin da piccolo, sono uno dei fondatori di Zaniah. Attualmente, oltre ad amministrare l'azienda, mi occupo di sviluppo web e search engine marketing (SEM).

Nessun commento


Scrivi un commento

Lascia un commento a questo articolo, ti garantiamo che il tuo indirizzo e-mail non verrà reso pubblico e che non riceverai MAI spam da parte di Zaniah.

Questo sito è abilitato Gravatar. Clicca qui per creare un Avatar che comparirà ogni qual volta lascerai un commento su Zaniah.it e su tutti gli altri siti e blog che supportano la tecnologia Gravatar.

* campi obbligatori.