Border style by CSS
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.
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.
No style If we don't mention about border style then it will be treated as hidden or no boarder.Boarder WidthWe can assign three state to width thin, medium , thick. In addition to this we can assign direct value in px. Here are the codes.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.
Boarder ColorWe can add color to our border by using boarder-color. To display the color border we have to display the border by using boarder style and specify a widthSTYLE="border-color:red" The code is here
Note that we can also define style , width and color in one line like this.
STYLE="boarder: 5px solid #0060c0;" The code is here
We can add style to one border only, like this
Inside tag
While using DHTML or using JavaScript we can manage border color like this ( examples )
This article is written by plus2net.com team.
![]() | ||
| ||