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

Be the first to post comment on this article :


Post Comment This is for short comments only. Use the forum for more discussions.

HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2015 All rights reserved worldwide Privacy Policy Disclaimer