Propriété CSS outline-color
Exemple
Définissez une couleur pour le contour :
div {outline-color: coral;}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
Un contour est une ligne tracée autour des éléments, à l'extérieur des bordures, pour faire ressortir l'élément.
La outline-colorpropriété spécifie la couleur d'un contour.
Remarque : Déclarez toujours la propriété de style de contour avant la
outline-colorpropriété. Un élément doit avoir un contour avant que vous en changiez la couleur.
| Valeur par défaut: | inverser si pris en charge, sinon couleur actuelle |
|---|---|
| Hérité: | non |
| Animable : | oui, voir propriétés individuelles . En savoir plus sur l'animation |
| Version: | CSS2 |
| Syntaxe JavaScript : | objet .style.outlineColor="#FF0000" |
Conseils et remarques
Remarque : les contours diffèrent des bordures ! Contrairement à la bordure, le contour est dessiné à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, le contour ne fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément ne sont pas affectées par la largeur du contour.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| outline-color | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Remarque : La valeur invertn'est prise en charge dans aucun navigateur, à l'exception d'Internet Explorer 8.
Syntaxe CSS
outline-color: invert|color|initial|inherit;
Valeurs de propriété
| Value | Description | Play it |
|---|---|---|
| invert | Performs a color inversion. This ensures that the outline is visible, regardless of color background. Note: Browsers are not required to support this value. | |
| color | Specifies the color of the outline. Look at CSS Color Values for a complete list of possible color values. | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Définissez une couleur pour le contour avec une valeur HEX :
div {outline-color: #92a8d1;}
Exemple
Définissez une couleur pour le contour avec une valeur RVB :
div {outline-color: rgb(201, 76, 76);}
Exemple
Définissez une couleur pour le contour avec une valeur RGBA :
div {outline-color: rgba(201, 76, 76, 0.3);}
Exemple
Définissez une couleur pour le contour avec une valeur HSL :
div {outline-color: hsl(89, 43%, 51%);}
Exemple
Définissez une couleur pour le contour avec une valeur HSLA :
div {outline-color: hsla(89, 43%, 51%, 0.3);}
Pages connexes
Tutoriel CSS : Plan CSS
Référence CSS : propriété outline
Référence HTML DOM : propriété outlineColor