Les bordures

On peut distinguer les quatre côtés de bordure :

1
border-top
2
border-right
3
border-bottom
4
border-left

Dans la suite nous présentons les propriétés top, les autres étant analogues.

DéfinitionÉpaisseur

1
.div1 { border-top-width: 10px;} // haut
2
.div2 { border-width: 10px 20px;} // haut, bas et droite, gauche
3
.div3 { border-width: 5px 10px 15px 20px;} // haut, droite, bas, gauche

Exemple :

1
div {
2
  width:100px;
3
  height: 100px;
4
  border-style: solid;
5
  border-color: black;
6
  border-width: 5px 10px 15px 20px;
7
}
width

DéfinitionCouleur

1
.div1 { border-top-color: red;} // haut
2
.div2 { border-color: red green;} // haut, bas et droite, gauche
3
.div3 { border-color: red green pink blue;} // haut, droite, bas, gauche

Exemple :

1
div {
2
  width:100px;
3
  height: 100px;
4
  border-style: solid;
5
  border-color: red green pink blue;
6
  border-width: 15px;
7
}
color

DéfinitionStyle

styles possibles :

none : pas de bordure

dotted : point

dashed : trait

solid : plein

double : double

groove : 3D gravé

ridge : 3D ressort

inset : 3D enfoncé

outset : 3D inverse de inset

1
.div1 { border-top-style: inset;} // haut
2
.div2 { border-style: solid dotted;} // haut, bas et droite, gauche
3
.div3 { border-style: dotted dashed double ridge;} // haut, droite, bas, gauche

Exemple :

1
div {
2
  width:100px;
3
  height: 100px;
4
  border-style: dotted dashed double ridge;
5
  border-color: #ddd;
6
  border-width: 15px;
7
}
style

DéfinitionArrondi

border-top-left-radius et border-top-right-radius

1
.div1 { border-top-left-radius: 3px;} // Arrondi cerculaire
2
.div2 { border-top-left-radius:: 3px 5px;} // Arrondi ellipse

Exemple :

1
div {
2
  width:100px;
3
  height: 100px;
4
  border: 15px solid gray;
5
  border-top-left-radius: 15px 30px;
6
  border-bottom-right-radius: 15px 30px;
7
}
arrondi

DéfinitionOmbre

box-shadow : x y f r c

x,y décalage

f rayon du flou

r rayon d'étalement

c couleur

1
div {
2
  width:100px;
3
  height: 100px;
4
  border: 15px solid gray;
5
  box-shadow: 6px 6px 4px 2px rgba(0, 0, 0, 0.2);
6
}
Ombre