La propriété border-radius est un raccourci qui permet d'arrondir les angles des 4 coins d'une boîte.

On peut affecter 1, 2, 3 ou 4 valeurs à la propriété border-radius.

h1 { border-radius: 5px; }
h2 { border-radius: 4px 8px; }
h3 { border-radius: 5px 6px 7px 8px; }

Remarque : la forme avec 3 valeurs est rarement utilisée : le coin haut à gauche aura la 1ère valeur, les coins haut à droite et bas à gauche auront la 2ème valeur et le coin bas à droite aura la 3ème valeur.

La valeur donnée pour les angles est le rayon du cercle qui sert à faire l'arrondi.

Si on veut définir les coins individuellement on peut utiliser border-top-left-radius, border-top-right-radius, border-bottom-right-radius et border-bottom-left-radius

Coins individuels à essayer :
rayon 1 et rayon 3 = 10px, rayon 2 et rayon 4 = 30px
rayon 1 et rayon 4 = 0px, rayon 2 et rayon 3 = 30px

Il est possible de définir des arrondis en ellpise en donnant 2 valeurs pour un même coin :

• la valeur du rayon horizontal,
• la valeur du rayon vertical.

h1 { border-top-left-radius: 50px 30px; }

Si on veut utiliser la propriété raccourci border-radius, la syntaxe est la suivante :

h1 { border-radius: 5px / 10px; }
h2 { border-radius: 4px 8px / 10px 20px ; }
h3 { border-radius: 10px 15px 20px 25px / 11px 12px 13px 14px; }