Side Border

Each side of the border can be handled separately using the these tags.

Usage:

border-top: <border-top-width> || <border-style> || <border-color> ;

border-left: <border-left-width> || <border-style> || <border-color> ;

border-bottom: <border-bottom-width>|| <border-style> || <border-color> ;

border-right: <border-right-width> || <border-style> || <border-color> ;

Each side of the border can be handled separately using this tags. Border sides takes the following values.

border-top: 5px dotted red – The top border is set using the tag border-top. The values or in the order width, style and color of top border.
border-left: 5pt dashed green – The left border is set using the tag border-left. The values or in the order width, style and color of top border.
border-bottom: 2% groove grey – The bottom border is set using the tag border-bottom. The values or in the order width, style and color of top border.
border-right: 5px solid blue – The right border is set using the tag border-right. The values or in the order width, style and color of top border.

Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
}

</style>
</HEAD>

<BODY>
<div class=”border1″> testing side border </div> <br />

</body>

</HTML>