Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the color of the outline with CSS
The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
Syntax
selector {
outline-color: value;
}
Possible Values
| Value | Description |
|---|---|
color name |
Specifies outline color using color names (red, blue, green, etc.) |
hex value |
Specifies outline color using hex values (#ff0000, #0000ff, etc.) |
RGB value |
Specifies outline color using RGB values (rgb(255,0,0), etc.) |
initial |
Sets the property to its default value |
inherit |
Inherits the property from its parent element |
Example
You can try to run the following code to implement outline-color property −
<!DOCTYPE html>
<html>
<head>
<style>
.outline-example {
outline-width: 3px;
outline-style: solid;
outline-color: blue;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<p class="outline-example">
This text has a thin solid blue outline.
</p>
</body>
</html>
A paragraph with a blue outline border appears on the page. The outline is 3px thick and solid style.
Conclusion
The outline-color property provides an easy way to set the color of an element's outline. Remember that you need to specify both outline-style and outline-width for the outline to be visible.
Updated on: 2026-03-15T11:20:45+05:30
104 Views
Advertisements