CSS (HTML) Tutorial - Border Style as dotted , dashed, solid, double line, thick

Topic

I want to have a dashed or dotted border in html?
I want a double line around my paragraph in html?
How to draw a ridge or groove styled border using style sheet?

Explanation

Property: Border Style

Usage:
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Definition:

The style of the border can be set using the tag border-style. Border Style takes the following values.
a)dotted- This will create a border with dotted lines.
b)dashed- This will create a border with dashed lines.
c)solid- This will create a border with solid lines.
d)double- This will create a border containing double lines.
e)groove- This will create a border that will look like groove.
f)ridge- This will create a border that will look like ridge.
g)inset- This will create a border with the line looking inset.
h)outset- This will create a border with the line looking outset.

Example 1:

<div style="border-width: 2px; border-style: dotted; border-color: red; "> testing border style</div>

Result:

testing border style

Example 2:

<div style="border-width: 2px; border-style: dashed; border-color: red; "> testing border style</div>

Result:

testing border style

Example 3:

<div style="border-width: 2px; border-style: solid; border-color: red; "> testing border style</div>

Result:

testing border style

Example 4:

<div style="border-width: 4px; border-style: double; border-color: red; "> testing border style</div>

Result:

testing border style

Example 5:

<div style="border-width: 4px; border-style: groove; border-color: red; "> testing border style</div>

Result:

testing border style

Example 6:

<div style="border-width: 4px; border-style: ridge; border-color: red; "> testing border style</div>

Result:

testing border style

Example 7:

<div style="border-width: 4px; border-style: inset; border-color: red; "> testing border style</div>

Result:

testing border style

Example 8:

<div style="border-width: 4px; border-style: outset; border-color: red; "> testing border style</div>

Result:

testing border style

CSS Border Style