<!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>
<!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>
<!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>