Flash cards
Review the key moves
What is the main idea behind CSS Borders?
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.
p.___ {border-style: dotted;}Put the learning moves in the order that makes the concept easiest to apply.
The CSS border properties allow you to specify the style, width, and color of an element's border.
I have borders on all sides.
I have a red, bottom border.
I have rounded borders.
I have a blue, left border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
- ridge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Live preview
Expected output
A dotted border. A dashed border. A solid border. A double border. A groove border. The effect depends on the border-color value. A ridge border. The effect depends on the border-color value. An inset border. The effect depends on the border-color value. An outset border. The effect depends on the border-color value. No border. A hidden border. A mixed border.
Note
None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set!