CSS 3 : Faire des coins arrondis avec border-radius

in #css37 years ago

miniature-tuto-border-radius-titcrea-news-810x481.png

Pour arrondir les coins d’un élément en CSS 3, il vous suffit d’utiliser la propriété : border-radius.

Border-radius en CSS 3 fonctionne de cette façon :

border-radius-titcrea-news-01.png

Arrondis les 4 coins de manière égale !


border-radius-titcrea-news-02.png

Arrondis les deux coins : haut, gauche et bas droit de 50px ! puis les deux autre : haut droit et bas gauche de 20px !


border-radius-titcrea-news-03.png

Arrondis les coins dans le sens des aiguilles d’une monte : haut gauche : 50 px, haut droite : 20px, bas droite : 10px et bas gauche : 30px !

Vous pouvez également calculer vos coins arrondis avec border-radius en CSS 3 avec des pourcentages.

Retrouvez tous nos tutoriels sur : https://forum.titcrea.fr