CSS Border Style

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