Docs CSS exécutables : Bordure CSS

Q: Comment faire des coins arrondis en CSS ?

Utilisez border-radius : border-radius: 8px; arrondit les quatre coins. border-radius: 50%; sur un carré donne un cercle, et une grande valeur comme 999px une forme de pilule. Le fond est arrondi aussi, même sans bordure.

Q: Comment mettre une bordure sur un seul côté ?

Utilisez une propriété de côté : border-bottom: 2px solid #e5e7eb;, ou border-inline-start pour le côté où commence le texte, qui fonctionne aussi pour les langues écrites de droite à gauche.

Le raccourci border

border trace une ligne autour d'un élément, entre son padding et sa margin. Le raccourci prend trois parties dans n'importe quel ordre : une épaisseur, un style et une couleur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border</title>
  <style>
    div { padding: 12px; margin-bottom: 12px; }
    .a { border: 2px solid #2563eb; }
    .b { border: 4px dashed #16a34a; }
    .c { border: 6px double #f59e0b; border-radius: 12px; }
  </style>
</head>
<body>
  <div class="a">border: 2px solid #2563eb</div>
  <div class="b">border: 4px dashed #16a34a</div>
  <div class="c">border: 6px double #f59e0b, rounded</div>
</body>
</html>

Partie	Propriété détaillée	Valeurs	Par défaut
Épaisseur	`border-width`	`1px`, `0.2em`, `thin`, `medium`, `thick`	`medium`
Style	`border-style`	`solid`, `dashed`, `dotted`, `double`, et d'autres	`none`
Couleur	`border-color`	N'importe quelle couleur	`currentColor` (la couleur du texte)

Le style est la partie que vous ne pouvez pas omettre. Sa valeur par défaut est none, donc border: 2px #2563eb; ne dessine rien du tout. Si vous omettez la couleur, la bordure prend la couleur du texte de l'élément.

Les styles de bordure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border styles</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
    .grid div {
      border-width: 6px;
      border-color: #2563eb;
      padding: 12px 6px;
      text-align: center;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div style="border-style: solid">solid</div>
    <div style="border-style: dashed">dashed</div>
    <div style="border-style: dotted">dotted</div>
    <div style="border-style: double">double</div>
    <div style="border-style: groove">groove</div>
    <div style="border-style: ridge">ridge</div>
    <div style="border-style: inset">inset</div>
    <div style="border-style: outset">outset</div>
    <div style="border-style: none">none</div>
  </div>
</body>
</html>

double a besoin d'au moins 3px pour montrer deux lignes. groove, ridge, inset et outset nuancent la couleur pour un effet 3D et varient légèrement d'un navigateur à l'autre. hidden ressemble à none ; les deux ne diffèrent que dans les tableaux aux bordures fusionnées, traités sur la page des bordures de tableau HTML.

Un côté à la fois

Chaque côté a son propre raccourci (border-top, border-right, border-bottom, border-left), et chaque partie a des propriétés par côté comme border-top-color. Les versions logiques, border-inline-start et border-block-end, suivent le sens du texte :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sides</title>
  <style>
    .heading { border-bottom: 3px solid #2563eb; padding-bottom: 6px; }
    .callout {
      border-inline-start: 6px solid #f59e0b;
      background: #fffbeb;
      padding: 10px 14px;
    }
    .four {
      border-width: 6px;
      border-style: solid;
      border-color: #2563eb #16a34a #f59e0b #111827; /* top right bottom left */
      padding: 12px;
      margin-top: 12px;
    }
    .no-top { border: 2px solid #111827; border-top: none; padding: 8px; margin-top: 12px; }
  </style>
</head>
<body>
  <h2 class="heading">A heading with a bottom border</h2>
  <p class="callout">A callout with a border on the start side.</p>
  <div class="four">Four sides, four colors</div>
  <div class="no-top">All sides, then the top removed</div>
</body>
</html>

border-color, border-width et border-style acceptent de une à quatre valeurs, dans le même ordre horaire que padding : haut, droite, bas, gauche.

Coins arrondis avec border-radius

border-radius arrondit les coins de la bordure et du fond, il fonctionne donc sur des éléments sans aucune bordure.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>border-radius</title>
  <style>
    .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
    .row div {
      width: 90px;
      height: 90px;
      background: #2563eb;
      color: white;
      display: grid;
      place-items: center;
      font: 13px monospace;
    }
    .r8 { border-radius: 8px; }
    .circle { border-radius: 50%; }
    .row .pill { border-radius: 999px; width: 150px; height: 44px; }
    .one { border-radius: 0 24px 0 24px; }
    .ellipse { border-radius: 50% / 25%; }
  </style>
</head>
<body>
  <div class="row">
    <div class="r8">8px</div>
    <div class="circle">50%</div>
    <div class="pill">999px</div>
    <div class="one">0 24px</div>
    <div class="ellipse">50% / 25%</div>
  </div>
</body>
</html>

Valeur	Résultat
`border-radius: 8px`	Tous les coins arrondis de 8px
`border-radius: 50%`	Un cercle sur un élément carré, une ellipse sur un rectangle
`border-radius: 999px`	Une pilule : les petits côtés deviennent des demi-cercles complets
`border-radius: 8px 0`	En haut à gauche et en bas à droite 8px, les deux autres carrés
`border-top-left-radius: 12px`	Un seul coin
`border-radius: 50% / 25%`	Coins elliptiques : rayon horizontal / rayon vertical

Un enfant qui a un fond peut dépasser des coins arrondis de son parent. overflow: hidden sur le parent le découpe selon la courbe.

Border ou outline

Un outline ressemble à une bordure, mais il est dessiné à l'extérieur et ne prend pas de place : en ajouter un ne déplace jamais rien. C'est pourquoi les navigateurs utilisent les outlines pour les indicateurs de focus.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Border vs outline</title>
  <style>
    .item { padding: 10px; background: #e5e7eb; margin-bottom: 10px; width: 220px; }
    .jump:hover { border: 4px solid #2563eb; }          /* grows the box: content jumps */
    .steady { border: 4px solid transparent; }
    .steady:hover { border-color: #2563eb; }            /* same size: no jump */
    .ring:hover { outline: 4px solid #2563eb; }         /* takes no space */
  </style>
</head>
<body>
  <div class="item jump">Hover: border added, box grows</div>
  <div class="item steady">Hover: transparent border colored</div>
  <div class="item ring">Hover: outline, no size change</div>
</body>
</html>

	Border	Outline
Prend de la place	Oui, fait partie de la taille de la boîte	Non
Par côté	Oui (`border-top`, ...)	Non, tout autour
Suit `border-radius`	Oui	Oui, dans les navigateurs actuels
Décalage par rapport à la boîte	Non	Oui, `outline-offset`
Usage typique	Design	Indicateurs de focus, débogage

Erreurs courantes

Pas de style de bordure. border: 1px #111827; et border-color: red; ne dessinent rien. Ajoutez solid (ou un autre style).
Une bordure qui fait sauter la mise en page au survol. Réservez l'espace avec une bordure transparente, ou utilisez un outline ou box-shadow.
Oublier la bordure dans la largeur. Un élément width: 100% avec une bordure déborde de son conteneur en content-box. Utilisez box-sizing: border-box.
border-radius avec un enfant qui dépasse des coins. Ajoutez overflow: hidden au parent arrondi.
Supprimer les contours de focus avec outline: none. Les utilisateurs du clavier en ont besoin ; restylez l'outline au lieu de le supprimer.

Questions fréquentes

Comment ajouter une bordure en CSS ?

Utilisez le raccourci avec une épaisseur, un style et une couleur : border: 2px solid #2563eb;. Le style est la partie la plus importante : sans lui, le style de bordure vaut none et aucune bordure n'est dessinée.

Pourquoi ma bordure CSS ne s'affiche-t-elle pas ?

Presque toujours parce qu'aucun style de bordure n'est défini. border: 2px #2563eb; ou border-color: red; seuls ne dessinent rien, puisque border-style vaut none par défaut. Ajoutez solid, dashed ou un autre style.

Comment faire des coins arrondis en CSS ?

Utilisez border-radius : border-radius: 8px; arrondit les quatre coins. border-radius: 50%; sur un carré donne un cercle, et une grande valeur comme 999px une forme de pilule. Le fond est arrondi aussi, même sans bordure.

Comment mettre une bordure sur un seul côté ?

Utilisez une propriété de côté : border-bottom: 2px solid #e5e7eb;, ou border-inline-start pour le côté où commence le texte, qui fonctionne aussi pour les langues écrites de droite à gauche.

Quelle est la différence entre border et outline ?

Une bordure fait partie de la boîte : elle prend de la place et modifie la taille de l'élément. Un outline est dessiné à l'extérieur de la bordure sans prendre de place, ne peut pas être défini côté par côté, et c'est ce que les navigateurs utilisent pour les indicateurs de focus. Les deux suivent border-radius dans les navigateurs actuels.

Concepts liés