How to Create Border using CSS

How to Create Border using CSS

In this article, you will learn How to Create Border using CSS.

Example:-

index.php

<html>
<head>
<title>How to Create Border using CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h2>Types of border</h2>
<p class="dotted">dotted border.</p>
<p class="dashed">dashed border.</p>
<p class="solid">solid border.</p>
<p class="double">double border.</p>
<p class="groove">groove border.</p>
<p class="ridge">ridge border.</p>
<p class="inset">inset border.</p>
<p class="outset">outset border.</p>
<p class="none">No border.</p>
<p class="hidden">hidden border.</p>
<p class="mix">mixed border.</p>
</body>
</html>

style.css

p.outset 
{
border-style: outset;
}
p.none 
{
border-style: none;
}
p.hidden 
{
border-style: hidden;
}
p.mix 
{
border-style: dotted dashed solid double;
}
p.dotted 
{
border-style: dotted;
}
p.dashed 
{
border-style: dashed;
}
p.solid 
{
border-style: solid;
}
p.double 
{
border-style: double;
}
p.groove 
{
border-style: groove;
}
p.ridge 
{
border-style: ridge;
}
p.inset 
{
border-style: inset;
}

Leave A Reply