outline

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propriété outline est une propriété raccourcie qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi outline-style, outline-width et outline-color.

Exemple interactif

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

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

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

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

À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec leur valeur initiale.

Bordures et contours

Les contours (outline) diffèrent des bordures, notamment sur les points suivants :

  • Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.
  • Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).

Syntaxe

css
/* style */
outline: solid;

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

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

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

/* Valeurs globales */
outline: inherit;
outline: initial;
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.

Note : Si aucun style n'est défini, le contour sera invisible (car le style par défaut vaut none).

Valeurs

<'outline-width'>

Voir outline-width.

<'outline-style'>

Voir outline-style.

<'outline-color'>

Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété color de l'élément est utilisée. Voir outline-color.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • outline-width: une longueur absolue ; si le mot-clé none est spécifié, la valeur calculée sera 0
  • outline-style: comme spécifié
  • 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'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

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

<outline-width> = 
  <line-width>  

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

<outline-color> = 
  auto        |
  <color>     |
  <image-1D>  

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

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

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

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

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

Exemples

Exemple simple

HTML

html
<p class="exemple">Je suis entouré de tirets rouges</p>

CSS

css
.exemple {
  outline: dashed red 2px;
  /* on aurait pu utiliser          */
  /* les trois propriétés unitaires */
  /* et avoir le même résultat      */
}

Résultat

Exemple de contour non rectangulaire

HTML

html
<p class="exemple">
  petit texte
  <span class="grand">Grand Texte</span>
  petit texte
</p>

CSS

css
.exemple {
  outline: dotted orange 1px;
}

.grand {
  font-size: xx-large;
}

Résultat

Accessibilité

Utiliser la propriété outline avec une valeur 0 ou none supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus

Spécifications

Specification
CSS Basic User Interface Module Level 4
# outline

Compatibilité des navigateurs