CSS outline-color Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

Demo

outline-color: red;

CSS outline-color Property

CSS outline-color property sets the color of an element's outline.

Note: An outline is a line that is drawn around an element, outside the border.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ outline-style: solid; outline-color: red; } </style> </head> <body> <h1>CSS outline-color Property</h1> <div> This is div container. </div> </body> </html>

Run

Syntax

Using CSS

element{ outline-color: red; }

Using Javascript

object.style.outlineColor="red";

Animatable

Yes, outline-color property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS outline-color property is invert.

Property Value

The following table provides a list of all values for CSS outline-color property.

Value	Explanation
color	Specifies that the outline color should be user given color. Check our color combinator
invert	This ensure the outline is visible, performs a color inversion of the background.

Using JavaScript

In the following example, we will demonstrate how to change the CSS outline-color property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 10px; margin-bottom: 10px; outline-style: dashed; } </style> </head> <body> <h1>CSS outline-color Property</h1> <div> This is div container. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.outlineColor = "red"; } </script> </body> </html>

Run