CSS Border Editor

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

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

Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of border by CSS. 
 Please put text here & see effect of CSS.

</body>
</html>