Outline-style - Propriété CSS

outline-style

Résumé des caractéristiques de la propriété `outline-style`

Description rapide

Définit le type de trait des contours (simple, double, pointillé...).

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

none

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété outline-style passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Interface utilisateur de base

Références (W3C)

🡇

🡅

CSS Basic User Interface Module Level 4

Statut du document: WD (document de travail)

CSS Basic User Interface Module Level 3

Statut du document: REC (recommandation)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Schéma de la syntaxe de `outline-style`.

Schéma syntaxique de la fonction outline-style
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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.

Valeurs pour `outline-style`.

outline-style: none;

Pas de contour. C'est la valeur par défaut.
outline-style: auto;

Le navigateur est libre de choisir le style le trait le plus approprié
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.
- 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
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.

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

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

Compatibilité des navigateurs avec `outline-style`.

outline-style est bien reconnue par tous les navigateurs.

Colonne 1

Compatibilité des navigateurs avec les contours. Les contours sont tracés après la mise en page et qui et modifie pas celle-ci.

Colonne 2

Prise en charge par les navigateurs de la propriété outline-style, qui définit le type de trait à utiliser pour les contours.

Remarques :

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

Prise en charge
des contours

Propriété
outline-style

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

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

Histoire de la propriété `outline-style`.

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

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

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