CSS Border

0 4022

The CSS Border properties allow you to specify how the border of the box representing an element should look.

CSS stands for Cascading Style Sheet.

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<style type="text/css">

.border1 {border-style: none;}
.border2 {border-style: solid; padding:5px; color:#CC0000}
.border3 {border-style: inset; padding:5px; color:#0033CC}
.border4 {border-style: dotted; padding:5px; color:#009966}
.border5 {border-style: double; padding:5px; color:#990099}
.border6 {border-style: groove; padding:5px; color:#336699}
.border7 {border-style: dashed; padding:5px; color:#003333}
.border8 {border-style: ridge; padding:5px; color:#33CCCC}
.border9 {border-style: outset; padding:5px; color:#669966}
.border10 {border-style: hidden; padding: 5px;}

</style>

</head>
<body>

<p class="border1"> Please put text here & see effect of border by CSS. </p>
<p class="border2"> Please put text here & see effect of border by CSS. </p>
<p class="border3"> Please put text here & see effect of border by CSS. </p>
<p class="border4"> Please put text here & see effect of border by CSS. </p>
<p class="border5"> Please put text here & see effect of border by CSS. </p>
<p class="border6"> Please put text here & see effect of border by CSS. </p>
<p class="border7"> Please put text here & see effect of border by CSS. </p>
<p class="border8"> Please put text here & see effect of border by CSS. </p>
<p class="border9"> Please put text here & see effect of CSS. </p>

</body>
</html>