There are many kind of border style provided by HTML, Today in this article we will learn how to create different types of border using html and css.
Solid Border
<div class="myborder">
SCHAUHAN.IN Solid Border Example
</div>
.myborder {
width: 400px;
height: 50px;
padding: 10px;
border: 5px solid #333;}
Border Radius
We can create rounded corner border using border-radius property.
<div class="myborder">
SCHAUHAN.IN Border Radius Example
</div>
.myborder
{width: 200px;
height: 50px;
padding: 10px;
border: 5px solid #0000CC;
border-radius:10px;}Dotted Border
<div class="myborder">
SCHAUHAN.IN Dotted Border Example
</div>
.myborder { width: 200px;
height: 50px;
padding: 10px;
border: 5px dotted #006600;}
Dashed Border
<div class="myborder">
SCHAUHAN.IN Dashed Border Example
</div>
.myborder {
width: 200px;
height: 50px;
padding: 10px;
border: 1px dashed #FF000}Outset Border
.myborder {
width: 200px;
height: 50px;
padding: 10px;
border: 10px outset #990066}<div class="myborder">
SCHAUHAN.IN Outset Border Example
</div>
Inset Border
<div class="myborder">
SCHAUHAN.IN Inset Border Example
</div>
.myborder {
width: 200px;
height: 50px;
padding: 10px;
border: 10px inset #3300FF;}Grooved Border
<div class="myborder">
SCHAUHAN.IN Grooved Border Example
</div>
.myborder {
width: 200px;
height: 50px;
padding: 10px;
border: 10px groove #3300FF; }
Very nice article