1. Home
  2. CSS
  3. CSS3: border-radius

CSS3: border-radius

by -

I codici CSS border-radius sono codici CSS3, cioè codici introdotti nella versione CSS 3 (dopo la versione CSS 2.1) che dovrebbero presentare soluzioni per la correzione di alcuni bug.

In questo articolo, in particolare, presenterò tutte le caratteristiche e le varianti del codice border-radius.

Il seguente div è un div dinamico per testare i vari codici border-radius.

Ecco una lista dei codici border-radius in tutte le loro varianti:

CSS3 Mozilla equivalenti WebKit equivalenti
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

Riporto di seguito degli esempi:

Esempio 1

-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;

Esempio 2

-moz-border-radius-topright: 2em;
-moz-border-radius-topleft: 2em;
-webkit-border-top-right-radius: 24px;
-webkit-border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-top-left-radius: 24px;

Esempio 3

-webkit-border-radius: 24px 0;
-moz-border-radius: 24px 0;
border-radius: 24px 0;

Esempio 4

-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
border-radius: 36px / 12px;

Esempio 5

-moz-border-radius-topright: 50px 30px;
-moz-border-radius-bottomright: 50px 30px;
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;
border-top-right-radius: 50px 30px;
border-bottom-right-radius: 50px 30px;