6XC

Générateur de bordure CSS

Concevez une bordure visuellement — épaisseur, style (solid, dashed, dotted, double…), couleur et rayon — avec aperçu en direct.

671 vues

La propriété border

Raccourci : border: épaisseur style couleur, ex. border: 2px dashed #5b3df5. Les styles incluent solid, dashed, dotted, double, groove, ridge, inset et outset. Combinez avec border-radius pour des cadres arrondis, ou stylez un seul côté (border-top, …) pour des accents comme un soulignement d'onglet.

Questions fréquentes

Pourquoi ma bordure change-t-elle la taille de l'élément ?

Par défaut, les bordures s'ajoutent aux dimensions de la boîte. Définissez box-sizing: border-box pour que largeur et hauteur incluent la bordure — le standard moderne appliqué par la plupart des resets.

Quelle épaisseur faut-il pour que le style double s'affiche ?

Le style double nécessite au moins 3px — deux lignes plus l'espace entre elles. En dessous, il s'affiche comme une simple ligne.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer