Outline-style - Propriété CSS

Schéma de la syntaxe de outline-style.

Description de la propriété outline-style..

Définit le type de trait utilisé pour dessiner le contour d'un élément (simple, double, pointillé, etc). Ne confondez pas le contour et la bordure (propriétés border) : reportez-vous à la description de la propriété résumée outline pour une explication détaillée des différences entre bordures et contours.

Remarque : les styles de traits pour les contours sont sensiblement les même que pour les bordures à deux différences près :

• La valeur hidden, valide pour les bordures ne l'est pas pour les contours. Elle serait de tout façon inutile puisque les épaisseurs des contours ne sont pas pris en compte dans la mise en page. La valeur hidden serait donc totalement équivalente à none.
• La valeur auto est disponible, alors qu'elle ne l'est pas pour les bordures.

Vous pouvez aussi consulter les pages sur ces autres propriétés, relatives aux contours :

Valeurs pour outline-style.

• outline-style: none;

  Pas de contour. C'est la valeur par défaut. Certains navigateurs ajoutent un petit arrondi d'angle.

• outline-style: auto;

  Le navigateur est libre de choisir le style le trait le plus approprié. Certains navigateurs comme Firefox   imposent également la couleur.

  outline-style:auto
• outline-style: solid;

  De nombreuses valeurs prédéfinies correspondent à des styles de trait particuliers. Ce sont les mêmes que pour la propriété border-style sauf en ce qui concerne la valeur hidden qui est interdite.

  • solid : Un trait plein.
  • double : Un double trait. Prévoir une épaisseur de trait de 3 pixels au minimum.
  • dotted : Un trait en pointillé (points).
  • dashed : Un trait en pointillé (tirets).
  • groove : Un trait avec un effet 3D qui le présente comme une rainure en creux ⁽¹⁾.
  • ridge : Un trait avec un effet 3D qui le présente comme un bourrelet ⁽¹⁾.
  • inset : Un trait avec effet 3D ⁽¹⁾. Les côtés haut et gauche sont assombris, tandis que les côtés bas et à droite sont éclaircis, ce qui donne l'impression que l'élément est en creux.
  • outset : Le contraire de inset : les traits en haut et à gauche sont éclaircis, tandis que les traits en bas et à droite sont assombris, ce qui donne une impression que l'élément est en relief ⁽¹⁾.
  solid

  double

  dotted

  dashed

  groove

  ridge

  inset

  outset

  (1) Pour être correctement restitués, les styles de trait avec effet 3D (groove, ridge, inset, outset) nécessitent une épaisseur de au moins 3 pixels et une couleur de luminosité intermédiaire, comme du gris par exemple. Voir la propriété outline-width pour la gestion de l'épaisseur du trait de contour et outline-color pour la couleur du contour.

• outline-style: initial; (none) outline-style: inherit; outline-style: revert; outline-style: revertLayer; outline-style: unset;

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

Exemple d'animation de outline-style.

outline-style peut être animée, mais puisqu'elle n'accepte pas de valeurs numériques, la transition entre les valeurs se fera de façon brutale.

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

Avec Javascript, modifier la valeur de outline-style.

Voici deux exemples de code Javascript pour modifier la valeur de outline-style.

let el = document.getElementById('id'); el.style['outline-style'] = 'double'; // ou let el = document.getElementById('id'); el.style.outlineStyle = 'double';

Avec Javascript, lire la valeur de outline-style.

Les codes ci-dessous fonctionnent lorsque la propriété a été affectée directement à l'élément lui-même via son attribut style et non pas en passant par un sélecteur CSS.

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

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

La valeur calculée est celle qui résulte de la prise en compte éventuelle des valeurs héritées. A défaut, ce sera la valeur initiale, soit none dans le cas de outline-style.

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

Avec JQuery, modifier la valeur de outline-style.

Comme Javascript, JQuery permet de manipuler les valeurs des propriétés, avec des codes finalement plus courts.


$('#id').css('outline-style', 'double');
// ou
$('#id').css('outlineStyle', 'double');


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

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

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété outline-style et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée (dans le cas de outline-style ce sera la même chose).

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

Compatibilité des navigateurs avec outline-style.

outline-style est bien reconnue par tous les navigateurs.

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-style

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-style.

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

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant outline-style. Première description 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

  Ce module de spécification regroupe les propriétés qui interagissent avec l'espace utilisateur (UI) : cursor, caret-color, etc. Il définit également les propriétés de contour outline....

  Concernant outline-style. 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

  Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.

  Concernant outline-style. 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-style fait partie du module CSS - Interface utilisateur de base (module CSS - Interface utilisateur de base). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :