Flash cards
Review the key moves
What is the main idea behind CSS Border Sides?
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.
___-top-style: dotted;Put the learning moves in the order that makes the concept easiest to apply.
CSS Border - Individual Sides
From the examples on the previous pages, you have seen that it is possible to specify a different border for each side.
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
In the example below we use the four properties above to set the style of each border side:
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}Live preview
Expected output
Different Border Styles
We can also use the shorthand border-style property to achieve the same result.
The example below gives the same result as the example above:
Example
p {
border-style: dotted solid;
}Live preview
Expected output
Different Border Styles
So, here is how it works:
If the border-style property has four values:
- border-style: dotted solid double dashed; top border is dotted right border is solid bottom border is double left border is dashed
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
If the border-style property has three values:
- border-style: dotted solid double; top border is dotted right and left borders are solid bottom border is double
- top border is dotted
- right and left borders are solid
- bottom border is double
If the border-style property has two values:
- border-style: dotted solid; top and bottom borders are dotted right and left borders are solid
- top and bottom borders are dotted
- right and left borders are solid
If the border-style property has one value:
- border-style: dotted; all four borders are dotted
- all four borders are dotted
Example
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}Live preview
The border-style property is used in the example above. However, it also works with border-width and border-color .