Border Style
The default border-style setting for an element is hidden.Border style’s values:
1.none
2.hidden
3.dotted
4.dashed
5.solid
6.double
7.groove
8.ridge
9.inset
10.outset
1.border-style:none -No border
2.border-style:hidden -Border will be hidden.
3.border-style:dotted -Border will be dotted.
4.border-style:dashed -Border will be dash dash.
5.border-style:solid -Border will be solid color.
6.border-style:double -Border will be double.
7.border-style:groove -groove means 3d ambus with
background color.
8.border-style:ridge -Opposition of groove.
9.border-style:inset -Looks like in side of background.
10.border-style:outset -Opposition of inset.
Example
<html>
<head>
<style type="text/css">
p.none{border-style:none;}
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.hidden{border-style:hidden;}
</style>
</head>
<body>
<p class="none">This is Border Style: <b>none</b></p>
<p class="dotted">This is Border Style: <b>dotted</b></p>
<p class="dashed">This is Border Style: <b>dashed</b></p>
<p class="solid">This is Border Style: <b>solid</b></p>
<p class="double">This is Border Style: <b>double</b></p>
<p class="groove">This is Border Style: <b>groove</b></p>
<p class="ridge">This is Border Style: <b>ridge</b></p>
<p class="inset">This is Border Style: <b>inset</b></p>
<p class="outset">This is Border Style: <b>outset</b></p>
<p class="hidden">This is Border Style: <b>hidden</b></p>
</body>
</html>
<head>
<style type="text/css">
p.none{border-style:none;}
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.hidden{border-style:hidden;}
</style>
</head>
<body>
<p class="none">This is Border Style: <b>none</b></p>
<p class="dotted">This is Border Style: <b>dotted</b></p>
<p class="dashed">This is Border Style: <b>dashed</b></p>
<p class="solid">This is Border Style: <b>solid</b></p>
<p class="double">This is Border Style: <b>double</b></p>
<p class="groove">This is Border Style: <b>groove</b></p>
<p class="ridge">This is Border Style: <b>ridge</b></p>
<p class="inset">This is Border Style: <b>inset</b></p>
<p class="outset">This is Border Style: <b>outset</b></p>
<p class="hidden">This is Border Style: <b>hidden</b></p>
</body>
</html>
Output
This is Border Style: none
This is Border Style: dotted
This is Border Style: dashed
This is Border Style: solid
This is Border Style: double
This is Border Style: groove
This is Border Style: ridge
This is Border Style: inset
This is Border Style: outset
This is Border Style: hidden
No comments:
Post a Comment