CSS border for style width and color

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

Border style by CSS

Boarder Width

Boarder Color

Subscribe