<p STYLE="border-style: dotted">STYLE="border-style:dotted" ,This is inline style with dotted border</p>
<p STYLE="border-style: ridge">STYLE="border-style:ridge "</p>
<p STYLE="border-style: solid">STYLE="border-style:solid"</p>
<p STYLE="border-style: double">STYLE="border-style:double"</p>
<p STYLE="border-style: dashed">STYLE="border-style:dashed"</p>
<p STYLE="border-style: inset">STYLE="border-style:inset"</p>
<p STYLE="border-style: outset">STYLE="border-style:outset"</p>
<p STYLE="border-style: groove">STYLE="border-style:groove"</p>
The output of above code is here
STYLE="border-style:dotted" ,This is inline style with dotted border
STYLE="border-style:ridge "
STYLE="border-style:solid"
STYLE="border-style:double"
STYLE="border-style:dashed"
STYLE="border-style:inset"
STYLE="border-style:outset"
STYLE="border-style:groove"
We can also have four borders of different style, like this.<p STYLE="border-style: dotted double dashed groove">STYLE="border-style:groove"</p>
In the above code the sequence of boarder is TOP(dotted), LEFT(double), BOTTOM(dashed), RIGHT(grove). Output is here
STYLE="border-style: dotted double dashed groove"
If we don't mention about border style then it will be treated as hidden or no boarder.<p> No style </p>
No style
If we don't mention about border style then it will be treated as hidden or no boarder.STYLE="border-width:thin"
STYLE="border-width:medium"
STYLE="border-width:thick"
STYLE="border-width:6px"
The code for above four type boarder width is here. We have also defined one boarder-style along with width, otherwise the boarder will be hidden.<p STYLE="border-style: dotted;border-width: thin">STYLE="border-width:thin"</p>
<p STYLE="border-style: dotted;border-width: medium">STYLE="border-width:medium"</p>
<p STYLE="border-style: dotted;border-width: thick">STYLE="border-width:thick"</p>
<p STYLE="border-style: dotted;border-width: 6px">STYLE="border-width:6px"</p>
STYLE="border-color:red"
The code is here<p STYLE="border-style: solid;border-width: 6px;border-color:red">STYLE="border-color:red"</p>
Note that we can also define style , width and color in one line like this.
STYLE="boarder: 5px solid #0060c0;"
The code is here<P STYLE="border: 5px solid #0060c0;">STYLE="boarder: 5px solid #0060c0;"</p>
We can add style to one border only, like this
Inside tag
<p STYLE="border-bottom-style: solid;border-width: 1px;border-color:red">Inside tag</p>
While using DHTML or using JavaScript we can manage border color like this ( examples )
document.getElementById("t2").style.borderStyle='solid';
document.getElementById("t2").style.borderWidth='1px';
document.getElementById("msgDsp").style.borderColor='red';
document.getElementById("t1").style.border='solid 1px red'; // all three styles in one go
document.getElementById("msgDsp").style.background='#f0f0c0';
CSS code Generator