Chargement...

Bordures CSS

Vous savez peindre des aplats, photos, dégradés et fondus doux. Compétence suivante : tracer le bord de la boîte. Une bordure (border) est la ligne qui encadre l’élément — cartes, boutons, champs et panneaux s’appuient dessus.

Qu’est-ce qu’une bordure ?

Une bordure CSS se place sur le bord de la boîte de l’élément. Elle a trois ingrédients : largeur (épaisseur), style (aspect — plein, tirets, etc.) et couleur. Sans style, vous ne voyez souvent aucune ligne utile malgré une largeur.

Les trois parties

Voyez chaque bordure comme une petite recette : épaisseur + look + peinture.

Forme longue largeur, style, couleur

css
CSS Code 
.card {
border-width: 2px;
border-style: solid;
border-color: #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}

Pourquoi le style compte

border-width seul ne suffit pas. Sans border-style autre que la valeur initiale none, vous ne verrez souvent aucune ligne. Commencez par solid avant les looks plus fantaisie.

Raccourci : une ligne au lieu de trois

Le raccourci border regroupe largeur, style et couleur. Ordre quotidien courant : largeur → style → couleur.

Raccourci border

css
CSS Code 
.panel {
border: 2px solid #0f766e;
padding: 1rem;
background-color: #ecfeff;
}

Styles de bordure courants

Le style est la personnalité de la ligne. Mémorisez d’abord un petit set du quotidien.

📊 Valeurs border-style courantes

Mot-clé Aspect Usage quotidien
solid Ligne continue Cartes, boutons, champs
dashed Tirets courts Indices, zones de dépôt
dotted Points Séparateurs doux, cadres discrets
double Deux lignes parallèles Accent décoratif (avec parcimonie)
none Aucune bordure dessinée Réinitialiser / retirer le bord
hidden Comme none pour l’effondrement des bordures de tableau Tableaux plus tard — retenez le nom

Quelques styles côte à côte

Même largeur et couleur ; seul le style change.

solid, dashed, dotted, double

css
CSS Code 
.box-solid { border: 3px solid #134e4a; }
.box-dashed { border: 3px dashed #134e4a; }
.box-dotted { border: 3px dotted #134e4a; }
.box-double { border: 3px double #134e4a; }

Un côté à la fois

Vous pouvez styler haut, droite, bas et gauche séparément — utile pour un soulignement, une barre d’accent à gauche ou une carte asymétrique.

Bordures par côté

css
CSS Code 
.quote {
border-top: none;
border-right: none;
border-bottom: none;
border-left: 4px solid #0f766e;
padding: 0.75rem 1rem;
background-color: #f8fafc;
}

Raccourci par côté

border-left: 4px solid #0f766e est la façon quotidienne de régler un bord sans toucher aux autres.

Habitude carte du quotidien

Une bordure fine avec padding et fond doux se lit comme une carte claire sans crier.

Carte à bordure simple

css
CSS Code 
.card {
border: 1px solid #cbd5e1;
border-radius: 0; /* l’arrondi est la leçon suivante — coins droits ici */
padding: 1rem;
background-color: #ffffff;
color: #0f172a;
}

Retirer une bordure

Pour effacer, préférez border: none (ou border-style: none). Seul border-color: transparent peut encore laisser de l’épaisseur — none est le reset propre.

Reset avec border none

css
CSS Code 
.plain {
border: none;
}

À vous de jouer

  1. Carte avec border-width, border-style: solid et border-color sarcelle.
  2. Réécrivez le même rendu avec border: 2px solid #0f766e.
  3. Quatre boîtes : solid, dashed, dotted et double à la même épaisseur.
  4. Citation avec seulement une épaisse bordure gauche.
  5. Partez d’un bouton bordé, puis retirez le bord avec border: none.

Erreurs fréquentes

  • Régler largeur et couleur sans border-style (rien n’apparaît)
  • Confondre border (bord dessiné) et margin (espace extérieur) — outils différents
  • Attendre des coins arrondis de border seul — c’est border-radius (leçon suivante)
  • Colorer chaque côté de façon criarde « juste parce que »
  • Laisser une bordure épaisse transparente alors que vous vouliez border: none

Résumé

  • Une bordure demande largeur, style et couleur
  • border: 2px solid #0f766e est le raccourci du quotidien
  • Apprenez d’abord solid, dashed, dotted, double et none
  • Stylez les côtés séparément quand le design le demande
  • Réinitialisez proprement avec border: none
  • Coins droits pour l’instant — l’arrondi vient ensuite

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
9
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel