SQL PHP HTML ASP JavaScript articles and free scripts to download
HTML CSS

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 "

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.

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.

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>

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

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';

Be the first to post comment on this article :


Google+
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer