Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Outline Color?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___-style: solid;3Order
Put the learning moves in the order that makes the concept easiest to apply.
The outline color can also be specified using a hexadecimal value (HEX):
- 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)
The outline-color property is used to set the color of the outline.
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)
HEX Values
The outline color can also be specified using a hexadecimal value (HEX):
Example
Formatted code
p.ex1 {
outline-style: solid;
outline-color: #ff0000;
/* red */
}Live preview
RGB Values
Example
Formatted code
p.ex1 {
outline-style: solid;
outline-color: rgb(255, 0, 0); /* red */
}Live preview
HSL Values
Example
Formatted code
p.ex1 {
outline-style: solid;
outline-color: hsl(0, 100%, 50%);
/* red */
}Live preview
You can also use HSL values
You can learn more about HEX, RGB and HSL values in our CSS Colors chapters.