outline

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2023.

La propriété raccourcie CSS outline définit la plupart des propriétés de contour dans une seule déclaration.

Exemple interactif

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgb(170 50 220 / 0.6);
border-radius: 2rem;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    Ceci est une boîte avec un contour autour.
  </div>
</section>

#example-element {
  padding: 0.75rem;
  width: 80%;
  height: 100px;
}

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Syntaxe

css

/* style */
outline: solid;

/* couleur | style */
outline: dashed #ff6666;

/* style | épaisseur */
outline: inset thick;

/* couleur | style | épaisseur */
outline: 3px solid green;

/* Valeurs globales */
outline: inherit;
outline: initial;
outline: revert;
outline: revert-layer;
outline: unset;

La propriété outline peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance. Comme pour toutes les propriétés raccourcies, toutes les sous-valeurs omises seront définies avec leur valeur initiale.

Note : Le contour sera invisible pour de nombreux éléments si son style n'est pas défini. En effet, le style par défaut est none. Une exception notable est les éléments input, qui reçoivent un style par défaut par les navigateurs.

Valeurs

<'outline-width'>: Définit l'épaisseur du contour. Par défaut, elle est medium si elle est absente. Voir outline-width.
<'outline-style'>: Définit le style du contour. Par défaut, il est none si absent. Voir outline-style.
<'outline-color'>: Définit la couleur du contour. Par défaut, elle est invert pour les navigateurs qui le supportent, currentColor pour les autres. Voir outline-color.

Description

Le contour est une ligne à l'extérieur de la bordure de l'élément. Contrairement aux autres zones de la boîte, les contours n'occupent pas d'espace, ils n'affectent donc pas la mise en page du document.

Il existe plusieurs propriétés qui affectent l'apparence d'un contour. Il est possible de changer le style, la couleur et l'épaisseur en utilisant la propriété outline, la distance par rapport à la bordure en utilisant la propriété outline-offset, et les angles des coins en utilisant la propriété border-radius.

Un contour n'est pas obligé d'être rectangulaire : Lorsqu'on traite du texte multiligne, certains navigateurs dessineront un contour pour chaque boîte de ligne séparément, tandis que d'autres envelopperont tout le texte avec un seul contour.

Accessibilité

Attribuer à outline une valeur de 0 ou none supprimera le style de sélection par défaut du navigateur. Si un élément peut être interactif, il doit avoir un indicateur de sélection visible. Fournissez un style de sélection évident si le style de sélection par défaut est supprimé.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `outline-width`: `medium` `outline-style`: `none` `outline-color`: `auto`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `outline-width`: une longueur absolue ; si le mot-clé `none` est défini, la valeur calculée sera `0` `outline-style`: comme défini `outline-color`: Pour le mot-clé `auto`, la valeur calculée est `currentcolor`. Pour la valeur de la couleur, si la valeur est transparente, la valeur calculée sera la valeur `rgba()` correspondante. S'il n'y en a pas, ce sera la valeur `rgb()` correspondante. Le mot-clé `transparent` correspondra à `rgba(0,0,0,0)`.
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `outline-width`: une longueur `outline-style`: par type de valeur calculée `outline-color`: une couleur

Syntaxe formelle

outline = 
  <'outline-width'>  ||
  <'outline-style'>  ||
  <'outline-color'>  

<outline-width> = 
  <line-width>  

<outline-style> = 
  auto                  |
  <outline-line-style>  

<outline-color> = 
  auto                  |
  <'border-top-color'>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

<outline-line-style> = 
  none    |
  auto    |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

<border-top-color> = 
  <color>     |
  <image-1D>  

<image-1D> = 
  <stripes()>  

<stripes()> = 
  stripes( <color-stripe># )  

<color-stripe> = 
  <color>                            &&
  [ <length-percentage> | <flex> ]?  

<length-percentage> = 
  <length>      |
  <percentage>

Exemples

Utiliser `outline` pour définir un style de sélection

HTML

html

<a href="#">Ceci est un lien avec un style de sélection spécial.</a>

CSS

css

a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #ee7733;
  outline-offset: 4px;
  background: #ffffaa;
}

Résultat

Spécifications

Spécification
CSS Basic User Interface Module Level 4 # outline

Compatibilité des navigateurs

Voir aussi

La propriété outline-width
La propriété outline-style
La propriété outline-color
La propriété border

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 21 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu