Bordi arrotondati con i CSS

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 */

Potrebbero interessarti anche...

Una risposta

  1. luigi scrive:

    figherrimo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Facebook Auto Publish Powered By : XYZScripts.com