Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

outline-width - Propriété CSS

outline-width

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

Description rapide
Définit l'épaisseur du trait d'encadrement.
Statut
Standard
Valeurs prédéfinies
medium | thick | thin
Pourcentages
Ne s'appliquent pas.
Valeur initiale
medium
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété outline-width passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Interface utilisateur de base
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

Description.

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.

Syntaxes 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 CSS de dimension).

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

  • outline-width: initial; outline-width: inherit; outline-width: revert; outline-width: revert-layer; outline-width: unset;

    La valeur initiale est : medium.

Animation de la propriété 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.

Simulateur.

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.

outline-width :
Contour appliqué sur un bloc
Contour appliqué
sur une portion de texte (élément inline)

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Prise en charge de la fonctionnalité permettant de dessiner le contour des éléments.
Colonne 2
Prise en charge de la propriété CSS outline-width.
1
Outlines
2
outline-width
Estimation de la prise en charge en pourcentage du parc actuel.
97%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que outline-width.

Les spécifications CSS éditées par le W3C sont organisées en modules. outline-width 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.

Propriétés.

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit la forme du curseur de la souris.
Définit l'accessibilité d'une zone de saisie.
Résumé des caractéristiques d'encadrement.
Définit la couleur de l'encadrement (outline).
Définit l'espacement entre le contour et l'élément.
Définit le type de trait des contours (simple, double, pointillé...).
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.