CSS Border Setting

css borderCSS Border Settings is an another important subject in web design. with help of css border property we can easily setup a border around the content of a web page.

Dear readers here, i will discuss about css border properties that will be helpful for your better experience in css.

List of Major CSS Border Properties are:

1.Border Style.

2.Border Width

3.Border color

4.Border

5.Border top,right,bottom,left.

1.Border Style:

CSS Border style provides a lot of ways to design or styling  a border around the content Like:

P{

border-style: solid;

}

  Output:

solid border

P {

border-style: double;

}

Output:

Double border

P {

border-style:dotted;

}

Output:

dotted border

P {

border-style: dashed;

}

Output:

Capture

P{ border-style:groove;}

output:

Groove Broder

P{ border-style:insert;}

output:

insert Border

P{ border-style:outset;}

output:

outset Border

P{ border-style:ridge;}

output:

Ridge Border

2.Border Width:

CSS border-width properties indicated the width of  a border and border width can be represent by pixel(px),normal,medium,thin etc.

For Example:

p{

border-width:6 PX; border-style:sold;

}

Output:

border width

3.Border color:

The CSS border-color property defines the color of a border.

For Example:

P {

border-color:red; border-style: solid;

}

The output looks like below:

border color

4.Border:

The border property provides a extra feature, if all the side of a content border are same size then we can present it with a single word border including border(style,width,color) at a time.

For Example:

<html>
<head>
<title>Borrder Styling </title>

<style>  /* internal css declaration*/
p{
border: green 7 px solid;
}

</style>

</head>

<body>

<p> This an example of css border property</p>

</body>
</html>

Output of the above code:

border

5.Border top,right,bottom,left:

With the help of border-top,border-left,border-right,border-bottom we can design a specific part of a border.

For Example:

p{

border-top-style:dotted;border-bottom-style:solid;

}

In HTML Code:

<html>
<head>
<title>Borrder Styling </title>

<style>
p {border-top-style:dotted; border-bottom-style: double;}
</style>

</head>

<body>

<p> This an example of border-top & border-bottom-style</p>

</body>
</html>

Output:

b

Another Example:

p {

border-left-style:double; border-bottom-style:dotted;
border-left-color:green;
}

<html>
<head>
<title>Borrder Styling </title>

<style>
p {

border-left-style:double; border-bottom-style:dotted;
border-left-color:green;
}
</style>

</head>

<body>

<p> Example</p>

</body>
</html>

The output of the above code:

dotted

Related Post or  you may interest

Like Our Facebook Page To Get Update

Speak Your Mind