CSS Outline Color
The outline-color property sets the color of the outline.
The color can be given as:
- a name — like
red. - a HEX value — like
#ff0000. - an RGB value — like
rgb(255,0,0). - an HSL value — like
hsl(0, 100%, 50%). invert— inverts the color, which keeps the outline visible against any background.
CSS Outline Color Examples
Here are some outlines with different colors. The elements also have a thin black border inside the outline.
Example
Four paragraphs with red, blue, green, and invert outlines.
Prompt
An HTML page that demonstrates different outline colors using color names and invert.
In an internal
<style> block, give paragraphs a 1px solid black border and 5px padding. Then make four classes: solid red, dotted blue, outset green, and solid invert outlines. Add a labeled paragraph for each.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
border: 1px solid black;
padding: 5px;
}
p.ex1 {
outline-style: solid;
outline-color: red;
}
p.ex2 {
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
outline-style: outset;
outline-color: green;
}
p.ex4 {
outline-style: solid;
outline-color: invert;
}
</style>
</head>
<body>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset green outline.</p>
<p class="ex4">A solid invert outline.</p>
</body>
</html>
HEX Values
The outline color can also be set with a hexadecimal (HEX) value.
Example
The outline color is set with the HEX value #ff0000.
Prompt
An HTML page that sets an outline color with a HEX value.
In an internal
<style> block, give a paragraph a solid outline with outline-color #ff0000 (red), plus a border and padding. Add a paragraph using it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {
border: 1px solid black;
padding: 5px;
outline-style: solid;
outline-color: #ff0000; /* red */
}
</style>
</head>
<body>
<p class="ex1">Outline color set with a HEX value.</p>
</body>
</html>
RGB Values
The outline color can also be set with an RGB value.
Example
The outline color is set with rgb(255, 0, 0).
Prompt
An HTML page that sets an outline color with an RGB value.
In an internal
<style> block, give a paragraph a solid outline with outline-color rgb(255, 0, 0) (red), plus a border and padding. Add a paragraph using it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {
border: 1px solid black;
padding: 5px;
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}
</style>
</head>
<body>
<p class="ex1">Outline color set with an RGB value.</p>
</body>
</html>
HSL Values
You can also set the outline color with an HSL value.
You can learn more about HEX, RGB, and HSL in the CSS Colors chapters.
Example
The outline color is set with hsl(0, 100%, 50%).
Prompt
An HTML page that sets an outline color with an HSL value.
In an internal
<style> block, give a paragraph a solid outline with outline-color hsl(0, 100%, 50%) (red), plus a border and padding. Add a paragraph using it.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.ex1 {
border: 1px solid black;
padding: 5px;
outline-style: solid;
outline-color: hsl(0, 100%, 50%); /* red */
}
</style>
</head>
<body>
<p class="ex1">Outline color set with an HSL value.</p>
</body>
</html>