Bordi arrotondati con i CSS

12 marzo 2009

Ogni volta che devo realizzare dei box con i bordi arrotondati sono costretto ad utilizzare una o più immagini per ottenere questo effetto, ma questo si potrebbe evitare perchè i CSS hanno una proprietà per realizzare questo effetto senza nessuna immagine, il problema però è dato dal fatto che questa proprietà è solamente visibile in tutti quei browser basati su WebKit o su Firefox e Safari.
Il codice da utilizzare è il seguente:

.arrotondato {
-moz-border-radius: 10px; /* Codice da usare su Firefox */
-webkit-border-radius: 10px; /* Codice da usare su browser basati su WebKit come Safari o Chrome */
}

Con questa proprietà verrà applicato un bordo arrotondato di 10px su tutti e 4 i vertici come nell’esempio sottostante:

Se invece volete inserire i bordi arrotondati solamente su alcuni vertici si possono utilizzare i seguenti codici

-moz-border-radius-bottomleft /* Vertice inferiore sinistro */
-moz-border-radius-bottomright /* Vertice inferiore destro */
-moz-border-radius-topleft /* Vertice superiore sinistro */
-moz-border-radius-topright /* Vertice superiore destro */

-webkit-border-radius-bottomleft /* Vertice inferiore sinistro */
-webkit-border-radius-bottomright /* Vertice inferiore destro */
-webkit-border-radius-topleft /* Vertice superiore sinistro */
-webkit-border-radius-topright /* Vertice superiore destro */