The important properties that are used to change the borders are as follows:
•border-width •border-color •border-styleAbove three properties can be used together by using border attribute.
Example
<html>
<body>
<p style="border: 3px violet solid;"> 3px is border width.
violet is border color.
solid is border style.</p>
</body>
</html>
In above example all three values are seprated with space. 3px indicates the width,violet indicates the color and solid indicates the style of the border.
There are four parts to each border:
•border-top •border-bottom •border-left •border-rightThe above four properties can be used to display each side of the border differently.
Example
<html>
<head>
<style type="text/css">
p{border: 3px dashed green;}
b{ border-top-style: solid; border-top-color: red;
}
i{border-bottom-style:dotted; border-bottom-color: blue; }
u{border-left-style: solid; border-left-color:red;}
</style>
</head>
<body>
<p>paragraph border</p>
<b>bold text with border.....</b><br>
<i>italic text with border.....</i><br>
<u>underlined text with border...</u>
</body>
</html>
There are eight possible styles for border which are shown in following example .
<html>
<head>
<style type="text/css">
p.dashed{border-style:dashed;}
p.solid{border-style:solid;}
p.dotted{border-style:dotted;}
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;}
</style>
</head>
<body>
<p class="dashed">Border style can be specified as <b>dashed</b></p>
<p class="solid">Border style can be specified as <b>solid</b></p>
<p class="dotted">Border style can be specified as <b>dotted</b></p>
<p class="double">Border style can be specified in <b>double</b></p>
<p class="groove">Border style can be specified in <b>groove</b></p>
<p class="ridge">Border style can be specified in <b>ridge</b></p>
<p class="inset">Border style can be specified in <b>inset</b></p>
<p class="outset">Border style can be specified in <b>outset</b></p>
</body>
</html>
Border width can be specified in pixels or one of the standard values thin,medium and thick.
Border width property can always use with "border-style" property otherwise it does not work. Example<html>
<head>
<style type="text/css">
p.thick{border-width: thick; border-style:solid;}
p.thin{border-width: thin;border-style:double}
p.medium{border-width: medium;border-style:ridge;}
p.pixel{border-width:10px; border-style:outset;}
</style>
</head>
<body>
<p class="thick">Border width can be specified as <b>thick</b></p>
<p class="thin">Border width can be specified as <b>thin</b></p>
<p class="medium">Border width can be specified as <b>medium</b></p>
<p class="pixel">Border width can be specified in <b>pixels</b></p>
</body>
</html>
The border color property is used to specify the color of border.
Example<html>
<head>
<style type="text/css">
p{border-width:10px;border-color:green; border-style:double;}
</style>
</head>
<body>
<p>Border color can be specified as <b>green</b></p>
</body>
</html>