Angoli arrotondati

Gli argomenti di questa pagina

  • Bordi ai box

Bordi ai box

La sintassi per ottenere i bordi arrotondati è semplice e duplice:

  • border-radius
  • border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius

Per la prima sintassi la sequenza è:
top-left
top-right
bottom-right
bottom-left
e vanno indicati i quattro valori espressi in pixel (border-radius: 0 20px 20px 20px) oppure uno solo dei valori se tutti gli angoli debbono essere uguali

Per la seconda sintassi la sequenza non è importante e nemmeno il numero dei valori. L'arrotondamento dell'angolo viene applicato a quello specificato (border-bottom-right-radius: 20px)

Il CSS: una classe per ogni formattazione di un singolo BOX (o DIV)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.angoli {
    border: 2px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px; /* firefox */
    -webkit-border-radius: 10px; /* safari, chrome */
}

.angoliAlternativo {
    border: 2px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    border-top-left-radius: 20px;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.angoliOpposti {
    border: 3px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-top-right-radius: 20px;
    -moz-border-topright-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    -moz-border-bottomleft-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
}

.angoliOppostiAlternativo {
    border: 3px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-radius: 0 20px 0 20px;
    -moz-border-radius: 0 20px 0 20px;
    -webkit-border-radius: 0 20px 0 20px;
}

.treTondi {
    border: 3px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-radius: 0 20px 20px 20px;
    -moz-border-radius: 0 20px 20px 20px;
    -webkit-border-radius: 0 20px 20px 20px;

Il codice HTML

Tutti gli angoli tondi<br />
<div class="angoli">
.angoli{ <br />
      border: 2px solid #0E5C2A; <br />
      margin: 20px; <br />
      padding: 10px; <br />
      border-radius: 10px; <br />
      -moz-border-radius: 10px; /* firefox */ <br />
      -webkit-border-radius: 10px; /* safari, chrome */ <br />
}
</div>

Tutti gli angoli tondi metodo alternativo<br />
<div class="angoliAlternativo">
.angoliAlternativo {  <br />
    border: 2px solid #0E5C2A; <br />
    margin: 20px; <br />
    padding: 10px; <br />
    -moz-border-radius-topleft: 20px; <br />
    -webkit-border-top-left-radius: 20px; <br />
    border-top-left-radius: 20px; <br />
    -moz-border-radius-topright: 20px; <br />
    -webkit-border-top-right-radius: 20px; <br />
    border-top-right-radius: 20px; <br />
    -moz-border-radius-bottomright: 20px; <br />
    -webkit-border-bottom-right-radius: 20px; <br />
    border-bottom-right-radius: 20px; <br />
    -moz-border-radius-bottomleft: 20px; <br />
    -webkit-border-bottom-left-radius: 20px; <br />
    border-bottom-left-radius: 20px; <br />
}
</div>

Gli angoli diametralmente opposti<br />
<div class="angoliOpposti">
.angoliOpposti {  <br />
    border: 3px solid #0E5C2A; <br />
    margin: 20px; <br />
    padding: 10px; <br />
    border-top-right-radius: 20px; <br />
    -moz-border-top-right-radius: 20px; <br />
    -webkit-border-top-right-radius: 20px; <br />
    border-bottom-left-radius: 20px; <br />
    -moz-border-bottom-left-radius: 20px; <br />
    -webkit-border-bottom-left-radius: 20px; <br />
}
</div>

Metodo alternativo<br />
<div class="angoliOppostiAlternativo">
.angoliOppostiAlternativo {  <br />
    border: 3px solid #0E5C2A; <br />
    margin: 20px; <br />
    padding: 10px; <br />
    border-radius: 0 20px 0 40px; <br />
    -moz-border-radius: 0 20px 0 20px; <br />
    -webkit-border-radius: 0 20px 0 20px; <br />

</div>

Tre angoli tondi uno normale<br />
<div class="treTondi">
.treTondi { <br />
      border: 3px solid #0E5C2A; <br />
      margin: 20px; <br />
      padding: 10px; <br />
      border-radius: 0 20px 20px 20px; <br />
      -moz-border-radius: 0 20px 20px 20px; <br />
      -webkit-border-radius: 0 20px 20px 20px; <br />
}
</div>

Il risultato ottenuto

Tutti gli angoli tondi
.angoli{
    border: 2px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px; /* firefox */
    -webkit-border-radius: 10px; /* safari, chrome */
}
Tutti gli angoli tondi metodo alternativo
.angoliAlternativo {
    border: 2px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    -moz-border-radius-topleft: 20px;
    -webkit-border-top-left-radius: 20px;
    border-top-left-radius: 20px;
    -moz-border-radius-topright: 20px;
    -webkit-border-top-right-radius: 20px;
    border-top-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -webkit-border-bottom-right-radius: 20px;
    border-bottom-right-radius: 20px;
    -moz-border-radius-bottomleft: 20px;
    -webkit-border-bottom-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
Gli angoli diametralmente opposti
.angoliOpposti {
    border: 3px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-top-right-radius: 20px;
    -moz-border-top-right-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    -moz-border-bottom-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
}
Metodo alternativo
.angoliOppostiAlternativo {
    border: 3px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-radius: 0 20px 0 40px;
    -moz-border-radius: 0 20px 0 20px;
    -webkit-border-radius: 0 20px 0 20px;
}
Tre angoli tondi uno normale
.treTondi {
    border: 3px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
    border-radius: 0 20px 20px 20px;
    -moz-border-radius: 0 20px 20px 20px;
    -webkit-border-radius: 0 20px 20px 20px;
}

Ora vediamo come abbinare più effetti ad uno stesso elemento: bordi arrotondati e bordi sfumati. All'interno del contenitore mettiamo altri elementi con formattazione particolare.
Nel CSS applichiamo sia il border-radius per ottenere i bordi arrotondati che il box-shadow per aggiungere una sfumatura al bordo.
All'interno del contenitore mettiamo un altro elemento formattato con box-shadow.

Il CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.AngoliPlus {
    border: 2px solid #0E5C2A;
    margin: 20px;
    padding: 10px;
     background-color: #ededed;
     width: 750px;
     margin: 50px;
     overflow: hidden;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);



.bordoSfumato {
    background-color: #FFFFE1;
    margin: 50px;
    padding: 10px;
    -webkit-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
    -moz-box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
    box-shadow: inset 0px 0px 20px 0px rgba(50, 50, 50, 1);
}

Il codice HTML

<div class="AngoliPlus">
<p class="bordoSfumato">Esempio avanzato dei bordi arrotondati associati ai bordi sfumati</p>
</div>

Il risultato ottenuto

Esempio avanzato dei bordi arrotondati associati ai bordi sfumati

 

 

 

 

 

 

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum