Les arrondis

DéfinitionArrondi

border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
.div1 { border-top-left-radius: 3px;} // Arrondi circulaire
2
.div2 { border-top-left-radius: 3px 5px;} // Arrondi ellipse (largeur hauteur)
.div1 { border-top-left-radius: 3px;} // Arrondi circulaire
.div2 { border-top-left-radius: 3px 5px;} // Arrondi ellipse (largeur hauteur)

Exemple :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
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
}
div {
  width:100px;
  height: 100px;
  border: 15px solid gray;
  border-top-left-radius: 15px 30px;
  border-bottom-right-radius: 15px 30px;
}
arrondi