CSS Borders
The CSS border properties allow you to define the border area of a box. There are three properties of a borders: border-color , border-style , border-width .

1. border-color : The border-color property specify the color of a box's border. There are border-top-color, border-bottom-color, border-left-color, border-right-color.

2. border-style : The border-style property sets the style of a box's border such as: solid, dotted, etc. 

3. border-width  : The border-width property specifies the width of the border area. There are border-top-width, border-bottom-width, border-left-width, border-right-width.

CSS Border Colors
<!DOCTYPE html>
<html>
<head>
<title>Border Color</title>
<style>
h4.color_1 {
    border-style: solid;
    border-color: blue;
}
h4.color_2 {
    border-style:dashed;
    border-color: #FC0;
} 
</style>
</head>

<body>

   <h4 class="color_1">Border Style : solid and Color : Blue</h4>
   <h4 class="color_2">Border Style : Dashed and Color : Yellow</h4>

</body>
</html>
Output :

Border Style : solid and Color : Blue

Border Style : Dashed and Color : Yellow

CSS Border Styles
<!DOCTYPE html>
<html>
<title>Border Styles</title>
<head>
<style>
h4.none {border-style: none;}
h4.dotted {border-style: dotted;}
h4.dashed {border-style: dashed;}
h4.solid {border-style: solid;}
h4.double {border-style: double;}
h4.groove {border-style: groove;}
h4.ridge {border-style: ridge;}
h4.inset {border-style: inset;}
h4.outset {border-style: outset;}
h4.hidden {border-style: hidden;}
</style>
</head>

<body>

<h4 class="none">Border Style : No border.</h4>
<h4 class="dotted">Border Style : dotted.</h4>
<h4 class="dashed">Border Style : dashed.</h4>
<h4 class="solid">Border Style : solid.</h4>
<h4 class="double">Border Style : double.</h4>
<h4 class="groove">Border Style : groove.</h4>
<h4 class="ridge">Border Style : ridge.</h4>
<h4 class="inset">Border Style : inset.</h4>
<h4 class="outset">Border Style : outset.</h4>
<h4 class="hidden">Border Style : hidden.</h4>

</body>
</html>
Output :

Border Style : No border.

Border Style : dotted.

Border Style : dashed.

Border Style : solid.

Border Style : double.

Border Style : groove.

Border Style : ridge.

Border Style : inset.

Border Style : outset.

CSS Border Width
<!DOCTYPE html>
<html>
<title>CSS Border Width</title>
<head>
<style>
h4.width_1 {
    border-style: solid;
    border-width: 5px;
}
h4.width_2 {
    border-style: solid;
    border-width: medium;
}
h4.width_3 {
    border-style: solid;
border-bottom-width:10px;
border-left-width:7px;
border-top-width:3px;
border-right-width:1px;
}
</style>
</head>

<body>

   <h4 class="width_1">Css Border Sample Width</h4>
   <h4 class="width_2">Css Border Sample Width</h4>
   <h4 class="width_3">Css Border Sample Width</h4>

</body>
</html>
Output :

Css Border Sample Width

Css Border Sample Width

Css Border Sample Width

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.