Outline-width - Propriété CSS

Schéma de la syntaxe de outline-width.

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités de dimension.

Description de la propriété outline-width.

La propriété outline-width définit l'épaisseur du contour d'un élément. Pensez aussi à définir la propriété outline-style pour que le contour soit effectivement affiché.

Certains styles de trait (double, effets de relief) nécessitent une épaisseur minimale de 2 ou 3 pixels pour être correctement rendus.

Pour une présentation générale des contours, et en particulier de la différence entre les contours et les bordures, reportez-vous à la propriété résumée outline.

Valeurs pour outline-width.

• outline-width: medium;

  Contour d'épaisseur moyenne : 3 pixels environ.

• outline-width: thin;

  Contour fin : 1 pixel environ.

• outline-width: thick;

  Contour épais : environ 5 pixels.

• outline-width: 7px;

  L'épaisseur du contour est déterminée par la valeur indiquée. Celle-ci doit être positive ou nulle, suivie d'une unité de dimension (voir les unités de dimension).

  Les pourcentages ne sont pas acceptés pour définir l'épaisseur des contours.

• outline-width: initial; (medium) outline-width: inherit; outline-width: revert; outline-width: revertLayer; outline-width: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de outline-width.

L'animation de outline-width est sans surprise : c'est une valeur numérique qui évolue progressivement depuis la valeur de départ définie dans l'animation jusqu'à la valeur de fin.
Bien entendu, puisqu'il s'agit d'un contour (et non pas d'une bordure) aucun élément n'est redimensionné ou déplacé pendant l'animation.

Accéder à la propriété outline-width par programme.

Avec Javascript, modifier la valeur de outline-width.

En Javascript, voici comment modifier la valeur de outline-width. On voit sur les deux exemples de code ci-dessous que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case, et une autre syntaxe avec la notation en camel-case.

let el = document.getElementById('id'); el.style['outline-width'] = '0.5ex'; // ou let el = document.getElementById('id'); el.style.outlineWidth = '0.5ex';

Avec Javascript, lire la valeur de outline-width.

La propriété doit avoir été affectée directement à l'élément lui-même par son attribut style et pas en passant par un sélecteur. La valeur est renvoyée telle qu'elle a été définie, avec la même unité.

let el = document.getElementById('id'); let value = el.style['outline-width']; // ou let el = document.getElementById('id'); let value = el.style.outlineWidth;

Avec Javascript, lire la valeur calculée de outline-width.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives, et de la prise en compte éventuelle des valeurs héritées. A défaut, la valeur calculée est la valeur initiale de la propriété : medium dans le cas de outline-width.

La valeur est retournée en pixels, quelque soit l'unité utilisée pour la définir.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('outline-width');

Avec JQuery, modifier la valeur de outline-width.


$('#id').css('outline-width', '0.5ex');
// ou
$('#id').css('outlineWidth', '0.5ex');


Avec JQuery, lire la valeur calculée de outline-width.

let value = $('#id').css('outline-width');

Exemple interactif avec la propriété outline-width.

Le simulateur applique un contour sur un élément du type block (balise div) et sur un élément du type inline (span). Mais pour ce qui est de l'épaisseur du contour, cela ne fait pas beaucoup de différence.

Compatibilité des navigateurs avec outline-width.

La propriété outline-width est bien reconnue par tous les navigateurs : pas de problème de compatibilité à signaler.

Remarques :

(1) Supporte aussi la valeur invert pour la propriété outline-color.
Ne supporte pas la propriété outline-offset.

1

Prise en charge
des contours

2

Propriété
outline-width

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété outline-width.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Description initiale de la propriété outline-style dans la spécification niveau 2 de CSS.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Interface utilisateur de base - Niveau 3

  Pas de changement concernant la propriété outline-style.
  

  02 Août 2002

  Document de travail.

  

  07 Juillet 2015

  Candidat à la recommandation.

  

  14 Décembre 2017

  Proposé à la recommandation.

  

  21 Juin 2018

  Recommandation.

• Module CSS - Interface utilisateur de base - Niveau 4

  Pas de changement concernant la propriété outline-style.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété outline-width fait partie de CSS Basic User Interface Module . Les propriétés suivantes sont également décrites dans ce même module.

Propriétés :