CSS outline-color Property
Last Updated :
06 Jun, 2023
The outline-color property of CSS sets the outline color of an element.
Syntax
outline-color: <color> | invert | inherit;
Property Value:
-
<color>: It sets the outline color to any valid CSS color.
Example: outline-color: black;
<!DOCTYPE html>
< html >
< head >
< title >CSS outline-color property</ title >
< style >
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-style: dashed;
/* CSS property for outline-color */
outline-color: black;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Example: outline-color: #FF00FF;
<!DOCTYPE html>
< html >
< head >
< title >CSS outline-color property</ title >
< style >
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-style: dashed;
/* CSS property for outline-color */
outline-color: #FF00FF;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Example: outline-color: rgb(0, 0, 255);
<!DOCTYPE html>
< html >
< head >
< title >CSS outline-color property</ title >
< style >
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-style: dashed;
/* CSS property for outline-color */
outline-color: rgb(0, 0, 255);
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Example: outline-color: hsl(0, 100%, 50%);
<!DOCTYPE html>
< html >
< head >
< title >CSS outline-color property</ title >
< style >
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-style: dashed;
/* CSS property for outline-color */
outline-color: hsl(0, 100%, 50%);
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
- invert: It set the outline color to a color which is inverse of the background, which ensures the outline will always be visible. Note: It is not supported by all browsers.
Example: outline-color: invert;
<!DOCTYPE html>
< html >
< head >
< title >CSS outline-color property</ title >
< style >
h1 {
border: 5px solid yellow;
text-align: center;
outline-width: 5px;
outline-style: solid;
/* CSS property for outline-color */
outline-color: invert;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
-
Inherit: It sets the outline color according to outline-color property inherited from its parent element.
Example: outline-color: inherit;
<!DOCTYPE html>
< html >
< head >
< title >CSS outline-color property</ title >
< style >
body {
outline-color: red;
}
h1 {
text-align: center;
outline-width: 5px;
outline-style: solid;
/* CSS property for outline-color */
outline-color: inherit;
}
</ style >
</ head >
< body >
< h1 >GeeksForGeeks</ h1 >
</ body >
</ html >
|
Output:
Supported Browsers: The outline-color property of CSS is supported by the following browsers:
-
Chrome 1
-
Edge 12
-
Firefox 1.5
-
Internet Explorer 8
-
Opera 7
-
Safari 1.2
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...