Flash cards
Review the key moves
What is the main idea behind CSS Border Color?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-style: solid;Put the learning moves in the order that makes the concept easiest to apply.
The border-color property is used to set the color of the four borders.
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%)"
- transparent
Note
If border-color is not set, it inherits the color of the element.
Example
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}Live preview
Expected output
Red border Green border Blue border
Specific Side Colors
The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
p.one {
border-style: solid;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */
}Live preview
HEX Values
The color of the border can also be specified using a hexadecimal value (HEX):
Example
p.one {
border-style: solid;
border-color: #ff0000; /* red
*/
}Live preview
RGB Values
Example
p.one {
border-style: solid;
border-color: rgb(255, 0, 0);
/* red */
}Live preview
HSL Values
Example
p.one {
border-style: solid;
border-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.