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
The outline-color Property in CSS
The CSS outline-color property is used to set the color of an outline around an element. Unlike borders, outlines do not take up space and are drawn outside the element's dimensions.
Syntax
selector {
outline-color: value;
}
Possible Values
| Value | Description |
|---|---|
color name |
Named color like red, blue, green |
hex |
Hexadecimal color like #ff0000 |
rgb() |
RGB values like rgb(255, 0, 0) |
rgba() |
RGB with alpha transparency |
hsl() |
Hue, saturation, lightness values |
hsla() |
HSL with alpha transparency |
Note: The outline-style property must be defined before using outline-color.
Example: Basic Outline Color
The following example demonstrates how to set a green outline color for a div element −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightgray;
border: 2px solid blue;
outline-style: solid;
outline-width: 3px;
outline-color: green;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="box">This box has a green outline</div>
</body>
</html>
A gray box with a blue border and a green outline appears. The outline is drawn outside the border, not affecting the element's dimensions.
Example: RGB Color Values
This example uses RGB color values to set different outline colors for headings −
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
outline-style: dashed;
outline-width: 2px;
outline-color: rgb(255, 0, 0);
padding: 10px;
}
h2 {
outline-style: dotted;
outline-width: 3px;
outline-color: rgb(0, 128, 255);
padding: 10px;
}
</style>
</head>
<body>
<h1>Heading with Red Outline</h1>
<h2>Heading with Blue Outline</h2>
</body>
</html>
Two headings appear: the first with a red dashed outline and the second with a blue dotted outline around the text.
Example: Multiple Outline Styles
This example shows different outline colors and styles applied to various elements −
<!DOCTYPE html>
<html>
<head>
<style>
.example {
margin: 20px;
padding: 15px;
display: inline-block;
background-color: #f0f0f0;
}
.solid-outline {
outline-style: solid;
outline-width: 2px;
outline-color: purple;
}
.dashed-outline {
outline-style: dashed;
outline-width: 3px;
outline-color: #ff6600;
}
.double-outline {
outline-style: double;
outline-width: 4px;
outline-color: rgba(0, 255, 0, 0.8);
}
</style>
</head>
<body>
<div class="example solid-outline">Solid Purple Outline</div>
<div class="example dashed-outline">Dashed Orange Outline</div>
<div class="example double-outline">Double Green Outline</div>
</body>
</html>
Three boxes appear side by side: one with a solid purple outline, one with a dashed orange outline, and one with a double green outline with transparency.
Conclusion
The outline-color property provides an effective way to add colored outlines to elements without affecting their layout. Remember to always set outline-style first, as outlines are invisible without a defined style.
Updated on: 2026-03-15T14:03:43+05:30
104 Views
Advertisements