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
CSS outline-color property
The CSS outline-color property is used to specify the color of an element's outline. It accepts color values in various formats including color names, hex codes, RGB values, and HSL values.
Syntax
selector {
outline-color: color;
}
Possible Values
| Value | Description |
|---|---|
color name |
Standard color names like red, blue, green |
hex |
Hexadecimal color values like #FF0000 |
rgb() |
RGB color values like rgb(255, 0, 0) |
hsl() |
HSL color values like hsl(0, 100%, 50%) |
invert |
Performs a color inversion of the background |
Example: Blue Outline Color
The following example demonstrates how to apply a blue outline color to text −
<!DOCTYPE html>
<html>
<head>
<style>
.outlined-text {
outline-width: 3px;
outline-style: solid;
outline-color: blue;
padding: 15px;
margin: 20px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<p class="outlined-text">
This text has a thin solid blue outline.
</p>
</body>
</html>
A paragraph with gray background and a blue outline border appears on the page. The outline is 3 pixels wide and solid in style.
Example: Multiple Outline Colors
This example shows different outline colors using various color formats −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 150px;
height: 80px;
margin: 10px;
padding: 10px;
outline-width: 2px;
outline-style: solid;
display: inline-block;
text-align: center;
background-color: #f9f9f9;
}
.red-outline {
outline-color: red;
}
.hex-outline {
outline-color: #00FF00;
}
.rgb-outline {
outline-color: rgb(255, 0, 255);
}
</style>
</head>
<body>
<div class="box red-outline">Red Outline</div>
<div class="box hex-outline">Green Outline</div>
<div class="box rgb-outline">Magenta Outline</div>
</body>
</html>
Three boxes appear side by side, each with different colored outlines: red, green, and magenta. Each box contains centered text describing its outline color.
Conclusion
The outline-color property provides flexibility in styling element outlines with various color formats. Remember that outlines appear outside the border and do not affect the element's layout or dimensions.
Updated on: 2026-03-15T11:26:18+05:30
122 Views
Advertisements