Border Style

Borders are rectangular outlines that surround an element. Borders present around text
and an image emphasize the content inside the text box. CSS border properties specify the
style, color, and width of the border.


lists the border-style properties.

border-style                       properties Description
border-left-style                               It sets an element’s left border.
border-right-style                             It sets an element’s right border.
border-top-style                               It sets an element’s top border.
border-bottom-style                         It sets an element’s bottom border.



lists the values of the border-style properties.

Value                                                   Description
dashed                                                         It is used for specifying a dashed border.
dotted                                                          It is used for specifying a dotted border.
double                                                         It is used for specifying two borders.
groove                                                         It is used for specifying a 3D grooved border.
inset                                                            It is used for specifying a 3D inset border.
outset                                                          It is used for specifying a 3D outset border.
ridge                                                            It is used for specifying a ridged border.
solid                                                             It is used for specifying a solid border

shows an HTML code

Explanation for the code:

border-left-style: ridge;

Applies a ridged border to the left

border-right-style: groove;

Applies a 3D grooved border to the right.

border-top-style: dashed;

Applies a dashed border at the top.

border-bottom-style: double;

Applies two borders at the bottm.