Loading lesson path
Overview
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.
Formula
The border - style property specifies what kind of border to display.dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove
Formula
- 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 noneDemonstration of the different border styles:
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;}A dotted border. A dashed border. A solid border. A double border.
Formula
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.
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!