CSS Border Style
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 StyleUsage:
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.
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
