CSS Borders, TutorialsPoint, CSS Borders Tutorial

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 Tutorial