Definition:
CSS outline-color is used to color the outline drawn around outside the border of an element. In the below image, the outline is colored by red color. Outline color can be used different color value property like predefined Standard color name, HEX, RGB, RGBA, HSL, and HSLA. Click each link to see color properties and how to use it in the outline-color.
Syntax:
1. outline-color: color-name; //standard predefined color name
2. outline-color: #ff0000; //HEX color value in red
3. outline-color: rgb(255,0,0); //RGB color value in red
4. outline-color: rgba(255,0,0,0.2); //RGBA color value in red
5. outline-color: hsl(0,100%,50%); //HSL color value in red
6. outline-color: hsla(0,100%,50%,0.6); //HSLA color value in red
7. outline-color: transparent; //transparent into parent color
8. outline-color: invert; //outline-color invert- Standard Color Name:
Definition:
CSS Outline-color can be specified by predefined color names such as red, green, blue, etc. See all predefined color name.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style:solid;
outline-color: red;
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a first paragraph with solid red outline. Outline-color is used predefined standard colors.<br/>outline-color: red; </div>
</p>
</body>
</html>
Output:
2) HEX Value
Definition:
CSS Outline-color can be specified by HEX value like #000000, #ffffff, etc. See the example below for more details of using HEX value in CSS Outline-color.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style:dashed;
outline-color: #ff0000;
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with dashed red outline. Outline-color defined in HEX value.<br/>outline-color: #ff0000; </div>
</p>
</body>
</html>
Output:
3) RGB Value
Definition:
CSS Outline-color can be specified by RGB value like rgb(255,0,0), rgb(255,20,10); etc. See the example below for more details of using RGB value in CSS Outline-color.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: dotted;
outline-color: rgb(255,0,0);
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with dotted red outline. Outline-color defined in RGB value.<br/>outline-color: rgb(255,0,0); </div>
</p>
</body>
</html>
Output:
4) RGBA Value
Definition:
CSS Outline-color can be specified by RGBA value like rgb(255,0,0,0.2), rgb(255,0,0,0.5) etc. See the example below for more details of using RGBA value in CSS Outline-color.
Souce Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: dotted;
outline-color: rgba(255,0,0,0.2);
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with double red outline. Outline-color defined in RGBA value.<br/>outline-color: rgba(255,0,0,0.2); </div>
</p>
</body>
</html>
Output:
5) HSL Value
Definition:
CSS Outline-color can be specified by HSL value like hsl(0, 100%, 50%), hsl(0, 10%, 50% ) etc. See the example below for more details of using HSL value in CSS Outline-color.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: groove;
outline-color: hsl(0, 100%, 50%);
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with groove red outline. Outline-color defined in HSL value.<br/>outline-color: hsl(0, 100%, 50%); </div>
</p>
</body>
</html>
Output:
6) HSLA Value
Definition:
CSS Outline-color can be specified by HSLA value like hsl(0, 100%, 50%,0.6), hsl(0, 10%, 50%,0.3) etc. See the example below for more details of using HSLA value in CSS Outline-color.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.paragraph1{
border: 5px solid black;
outline-style: ridge;
outline-color: hsla(0, 100%, 50%, 0.6);
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="paragraph1">This is a paragraph with ridge red outline. Outline-color defined in HSL value.<br/>outline-color: hsla(0, 100%, 50%, 0.6); </div>
</p>
</body>
</html>
Output:
7. Transparent
Definition:
CSS Outline-color can be specified by transparent into its parent color. See the example below for more details of using a transparent value in outline-color.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-border{
border: 5px solid red;
outline-style: ridge;
outline-color: transparent;
background-color: pink;
text-align:center;
padding: 20px;
}
.inner-border{
border: 5px solid red;
outline-style: ridge;
outline-color: transparent;
background-color: pink;
text-align:center;
}
</style>
</head>
<body>
<div class="outer-border">This is an outer border where outline-color is transparent to its parent color.
<div class="inner-border">This is an inner border where outline-color is transparent to outer-border background color. </div>
</div>
</p>
</body>
</html>
Output:
8. invert
Definition:
CSS outline-color invert is set to inverse the background color which ensures the outline is always visible.
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
.inverse{
border: 5px solid green;
outline-style: solid;
outline-color: invert;
background-color: pink;
text-align:center;
padding: 20px;
}
</style>
</head>
<body>
<div class="inverse">This is an inverse paragraph where outline-color is inverse to its parent background color. Here, my parent background color is white and it inverse into black outline-color.
</div>
</p>
</body>
</html>
Output:
You may be interested in the following topics:
- CSS Outline-offset
- CSS Outline-width
- CSS Outline-style
- CSS Outline-color
- CSS Outline
- CSS Outline (All Properties)