CSS Outline Color
CSS Outline Color
The outline-color property is used to set the color of the outline.
The color can be set by:
- name – specify a color name, like “red”
- HEX – specify a hex value, like “#ff0000”
- RGB – specify a RGB value, like “rgb(255,0,0)”
- HSL – specify a HSL value, like “hsl(0, 100%, 50%)”
- invert – performs a color inversion (which ensures that the outline is visible, regardless of color background)
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>
<p>A solid red outline.</p>
<p>A dotted blue outline.</p>
<p>An outset grey outline.</p>
</body>
</html>
HEX Values
The outline color can also be specified using a hexadecimal value (HEX):
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: #ff0000; /* red */
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: #0000ff; /* blue */
}
p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: #bbbbbb; /* grey */
}
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using a hexadecimal value (HEX):</p>
<p>A solid red outline.</p>
<p>A dotted blue outline.</p>
<p>A solid grey outline.</p>
</body>
</html>
RGB Values
Or by using RGB values:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: rgb(0, 0, 255); /* blue */
}
p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: rgb(187, 187, 187); /* grey */
}
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using RGB values:</p>
<p>A solid red outline.</p>
<p>A dotted blue outline.</p>
<p>A solid grey outline.</p>
</body>
</html>
HSL Values
You can also use HSL values:
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: hsl(240, 100%, 50%); /* blue */
}
p.ex3 {
border: 2px solid black;
outline-style: solid;
outline-color: hsl(0, 0%, 73%); /* grey */
}
</style>
</head>
<body>
<h2>The outline-color Property</h2>
<p>The color of the outline can also be specified using HSL values:</p>
<p>A solid red outline.</p>
<p>A dotted blue outline.</p>
<p>A solid grey outline.</p>
</body>
</html>