Faire des coins arrondis en CSS

tuto faire coins arrondis css

Avant la prise en charge du CSS3 par les navigateurs, la création de blocs aux coins arrondis nécessitait l’utilisation créative d’images de fond, de bordures et de positionnement.

Heureusement, cette époque est révolue. Aujourd’hui, les navigateurs prennent en charge le HTML5 et CSS3 et ses propriétés de border-radius.

Les propriétés border-radius permettent d’arrondir facilement les coins d’une boîte.

Arrondir les 4 coins

Les propriétés border-radius de la bordure fonctionnent en courbant le coin selon un cercle dont le centre est décalé du coin de la boîte de la distance que vous spécifiez.

Pour créer une simple boîte aux coins arrondis, ajoutez la propriété border-radius à la boîte 1.

#box1 {
-moz-border-radius: 25px; /* pour Mozilla */
-khtml-border-radius: 25px; /* pour Safari et Chrome */
-webkit-border-radius: 25px; /* pour Safari sur Mac */
border-radius: 25px; /* CSS3 */
}

La propriété « border-radius » est une propriété abrégée qui fixe le rayon pour les quatre coins de la boîte à la même valeur lorsqu’on lui donne une seule valeur.

Arrondir chaque coin individuellement

Pour changer la courbure des coins en différentes valeurs, vous pouvez définir plus d’une valeur, les valeurs étant séparées par des espaces.

La première valeur représente le coin supérieur gauche, la deuxième représente le coin supérieur droit, la troisième représente le coin inférieur droit et la quatrième représente le coin inférieur gauche.

Ajoutez le rayon de bordure suivant à la boite 2.

#box2 {
-moz-border-radius: 10px 140px 30px 140px; /* pour Mozilla */
-khtml-border-radius:  10px 140px 30px 140px; /* pour Safari et Chrome */
-webkit-border-radius:  10px 140px 30px 140px; /* pour Safari sur Mac */
border-radius:  10px 140px 30px 140px; /* CSS3 */
}

/* Explication */
border-radius: haut gauche - haut droit - bas droit - bas gauche

Dans votre navigateur, les deux boites devraient ressembler à ceci :

coins arrondis en css tutoriel

Diffusez ce contenu sur vos réseaux
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook

Youcef Kébaïli

Consultant en référencement, chef de projet Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Avec ce blog, ma mission est d'aider les entrepreneurs, qui ne sont pas spécialistes du web, à réussir leur propre site, et qu'il soit surtout visible !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *