Générateur de bordure CSS personnalisée
Réglez épaisseur, style, couleur et arrondi d'une bordure CSS — de façon uniforme ou par côté — avec un aperçu en direct, puis copiez le code prêt à l'emploi. Traitement 100% local — rien n'est envoyé à un serveur.
Comment ça marche
Une bordure CSS combine trois informations : une épaisseur, un style de trait et une couleur, éventuellement arrondie avec border-radius. Cet outil vous laisse régler ces valeurs de façon uniforme sur les quatre côtés ou indépendamment pour chaque côté, avec un rendu visuel immédiat pour valider l'effet avant de copier le code.
Quelle est la différence entre "groove", "ridge", "inset" et "outset" ?
Ces quatre styles simulent un effet de relief en 3D à partir de la couleur choisie : "groove" donne l'impression d'un sillon creusé, "ridge" d'une arête en relief, "inset" d'un cadre enfoncé et "outset" d'un cadre en saillie ; le rendu exact dépend du navigateur et de la couleur de fond utilisée.
Pourquoi séparer les épaisseurs par côté plutôt que d'utiliser le raccourci "border" ?
Le raccourci border ne permet pas de fixer une épaisseur différente par côté ; pour un effet asymétrique (bordure épaisse en haut, fine sur les côtés), il faut utiliser les propriétés détaillées border-top-width, border-right-width, etc., comme le fait cet outil lorsque l'option "épaisseur identique" est désactivée.
Aucune donnée n'est transmise à un serveur : l'aperçu et le code sont générés directement dans votre navigateur.