border-radius

La propriété border-radius permet de définir des coins arrondis pour la bordure d'un élément. La courbure de chaque coin est définie avec un ou deux rayons de courbures qui permettent de définir un arc de cercle ou un arc d'ellipse.

Cette propriété est une propriété qui permet de définir border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius. Les valeurs peuvent être exprimées avec des longueurs ou bien avec des pourcentages.

Lorsque l'on utilise un seul rayon (pour les arrondis circulaires), on peut avoir de 1 à 4 valeurs.

• Une valeur Les 4 angles ont le même arrondi
  border-radius: 20px;
  
  
  
• Deux valeurs La première valeur correspond à l'angle supérieur gauche et à l'angle inférieur droit. La deuxième valeur correspond aux deux autres angles
  border-radius: 20px 30%;
  
  
  
• Trois valeurs La première valeur correspond à l'angle supérieur gauche. La deuxième valeur correspond aux angles haut droit et bas gauche. La troisième valeur correspond à l'angle en bas à droite.
  border-radius: 20px 30% 0;
  
  
  
• Quatre valeurs Les valeurs correspondent respectivement aux coins en haut à gauche, en haut à droite, en bas à droite et en bas à gauche.
  border-radius: 20px 30% 1em 75px;
  

Lorsque l'on utilise deux rayons (pour les arrondis elliptiques), on peut avoir deux séries de 1 à 4 valeurs séparées par un trait oblique "/". La première série correspond aux rayons de courbure horizontaux et la deuxième série correspond aux rayons de courbure verticaux.

• Un couple de valeurs Les 4 angles ont la même courbure
  border-radius: 40px / 80px;
  
  
  
• Deux couples de valeurs Le premièr couple de valeurs correspond à l'angle supérieur gauche et à l'angle inférieur droit. La deuxième couple de valeurs correspond aux deux autres angles
  border-radius: 20px 30% / 50px 10px;
  
  
  
• Trois couples de valeurs Le premièr couple de valeurs correspond à l'angle supérieur gauche, la deuxième couple de valeurs correspond à l'angle supérieur droit et à l'angle du bas à gauche. Enfin, le troisième couple correspond à l'angle du bas à droite.
  border-radius: 20px 30% 50% / 50px 10px 50%;
  
  
  
• Quatre couples de valeurs Les quatre couples de valeurs correspondent respectivement aux coins en haut à gauche, en haut à droite, en bas à droite et en bas à gauche.
  border-radius: 5px 10px 20px 40px / 10px 20px 40px 80px;
  

Une valeur est intéressante dans le sens où elle permet d'obtenir des formes régulières : border-radius: 50%;.

• Avec un carré
  
  
  
• Avec un rectangle