Border style by CSS

We will discuss how to assign border style, width and color for any HTML element using CSS
<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 "







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.

Boarder Width

We can assign three state to width thin, medium , thick. In addition to this we can assign direct value in px. Here are the codes.





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>

Boarder Color

We 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 width


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("t1").style.border='solid 1px red'; // all three styles in one go 
CSS code Generator
HTML Fonts with CSS Body with CSS


* indicates required
Subscribe to plus2net

    Post your comments , suggestion , error , requirements etc here

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer