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

CSS code Generator
HTML Fonts with CSS Body with CSS

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Border style by CSS

Boarder Width

Boarder Color

Subhendu Mohapatra