Démarrez avec Shutterstock
SEMrush
En savoir plus sur ces produits

Générateur de cadre arrondi via Border Radius

La propriété border-radius ajoute des coins arrondis à un élément. Chaque coin peut être défini indépendamment, ou tous en même temps en sélectionnant 'Tous'. En complément, vous pouvez définir une bordure, en sélectionnant le style, la taille et la couleur.

Preview

Enregistré!

Réinitialisé!
Code CSS à copier
 

Border-radius expliquée

La propriété CSS3 border-radius vous permet d'ajouter des coins arrondis à un élément html, sans avoir besoin d'utiliser d'images ou de hack CSS. Supposons que vous ayez un élement identifié MonDiv, et défini comme ci-dessous :

<div id="MonDiv"> </div>;

Pour arrondir chacun des coins de la même manière, vous pouvez utiliser la syntaxe suivante dans des balises <style></style>, ou dans un fichier css :

#MonDiv { border-radius: 10px;
}

Dans cet exemple, les 4 coins sont arrondis à 10 px.
Il est également possible avec cette syntaxe de spécifier une valeur différente pour chaque coin, comme par exemple 2 px pour le coin en haut à gauche, 4 px en haut à droite, 6 px en bas à droite, et 8 px en bas à gauche :

#MonDiv { border-radius: 2px 4px 6px 8px;
}

Une autre syntaxe permet de définir chaque valeur d'arrondi par une propriété CSS différente. La règle définie ci-dessous permet d'obtenir le même résultat que précédemment :

#MonDiv { border-top-left-radius: 2px; border-top-right-radius: 4px; border-bottom-right-radius: 6px; border-bottom-left-radius: 8px;
}

Aujourd'hui un grand nombre d'utilisateurs utilisent des versions de navigateurs pour lesquelles la propriété border-radius n'était pas standardisée. Pour une compatibilité maximale, il est très important d'ajouter des lignes avec les préfixes de navigateurs (comme -moz- pour Mozilla, -webkit- pour Chrome et Safari).

#MonDiv { -webkit-border-radius: 2px 4px 6px 8px; -moz-border-radius: 2px 4px 6px 8px; border-radius: 2px 4px 6px 8px;
}
Ecrire à la main ces lignes de codes peut s'avérer fastidieux, c'est pourquoi il est très utile de passer par un générateur de CSS comme MakingCSS.

Compatibilité des navigateurs :

border-radius


5.0
4.0 -webkit-

9.0

4.0
3.0 -moz-

5.0
3.1 -webkit-

10.5

Laisser votre avis