Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Border Width?
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 width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
The border-width property specifies the width of the four borders.
Specific Side Widths
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick:
Example
Formatted code
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}Live preview
Expected output
5px border-width medium border-width 2px border-width thick border-width
Specific Side Widths
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border):
Example
Formatted code
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the
sides */
}
p.three {
border-style: solid;
border-width: 25px 10px
4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}Live preview