CSS outline-color Property
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
>
<!-- Internal CSS Style Sheet -->
<
style
>
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-style: dashed;
/* CSS property for outline-color */
outline-color: black;
}
</
style
>
</
head
>
<
body
>
<!-- outline-color: black;-->
<
h1
>w3wiki</
h1
>
</
body
>
</
html
>
Output:
Example: outline-color: #FF00FF;
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS outline-color property</
title
>
<!-- Internal CSS Style Sheet -->
<
style
>
h1 {
color: green;
text-align: center;
outline-width: 5px;
outline-style: dashed;
/* CSS property for outline-color */
outline-color: #FF00FF;
}
</
style
>
</
head
>
<
body
>
<!-- outline-color: #FF00FF;-->
<
h1
>w3wiki</
h1
>
</
body
>
</
html
>
Output:
Example: outline-color: rgb(0, 0, 255);
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS outline-color property</
title
>
<!-- Internal CSS Style Sheet -->
<
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
>
<!-- outline-color: rgb(0, 0, 255);-->
<
h1
>w3wiki</
h1
>
</
body
>
</
html
>
Output:
Example: outline-color: hsl(0, 100%, 50%);
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>CSS outline-color property</
title
>
<!-- Internal CSS Style Sheet -->
<
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
>
<!-- outline-color: hsl(0, 100%, 50%);-->
<
h1
>w3wiki</
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
>
<!-- Internal CSS Style Sheet -->
<
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
>
<!-- outline-color: invert;-->
<
h1
>w3wiki</
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
>
<!-- Internal CSS Style Sheet -->
<
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
>
<!-- outline-color: inherit;-->
<
h1
>w3wiki</
h1
>
</
body
>
</
html
>
Output:
- Chrome 1
- Edge 12
- Firefox 1.5
- Internet Explorer 8
- Opera 7
- Safari 1.2
Supported Browsers: The outline-color property of CSS is supported by the following browsers:
Contact Us