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.


Effects
Options

Ici vous pouvez personnaliser l'apparance de la zone de visualisation des effets.

Enregistré!
Réinitialisé!


Code CSS à copier



Compatibilité des navigateurs

Pour aller plus loin


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.

Laisser votre avis