FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
The style, width and color of border of a HTML component is set by the CSS border properties.
Border property has four sub property
We can change the border style of a section of HTML use the border-style property. border-style property has the following values
CSS Code
div
{
margin:10px;
}
.dotted
{
border-style:dotted;
}
.dashed
{
border-style:dashed;
}
.solid
{
border-style:solid;
}
.double
{
border-style:double;
}
.groove
{
border-style:groove;
}
.ridge
{
border-style:ridge;
}
.inset
{
border-style:inset ;
}
.outset
{
border-style:outset;
}
.none
{
border-style:none;
}.hidden
{
border-style:hidden;
}
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Border Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="dotted">Dotted</div>
<div class="dashed">Dashed</div>
<div class="solid">Solid</div>
<div class="double">Double</div>
<div class="groove">Groove</div>
<div class="ridge">Ridge</div>
<div class="inset">Inset</div>
<div class="outset">Outset</div>
<div class="none">None</div>
<div class="hidden">Hidden</div>
</body>
</html>
top->dotted
right->solid
bottom->double
left->dashed
top->dotted
right & left->solid
bottom->dashed
top & bottom->dotted
right & left->solid
top, right, bottom & left->solid
By the help of border-width property of CSS we can change the border width of a section of HTML.the value of border-width are specified by the following values
auto : set by browser
length : specified a margin in pt,cm, px etc
% : % of the width of a container
inherit : value inherit from its parent element.
div
{
margin:50px;
}
.first
{
border-style:solid;
border-width:thick;
}
.second
{
border-style:solid;
border-width:2px;
}
.third
{
border-style:solid;
border-top-width:2px;
border-right-width:10px;
border-bottom-width:5px;
border-left-width:20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Border width Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="first">Thick</div>
<div class="second">2x</div>
<div class="third">Multiple</div>
</body>
</html>
to show the rounded corner border of a section in HTML then we used the border-radius property of CSS.
div
{
margin:10px;
}.round1
{
border-style:solid;
border-width:thick;
border-radius:10px;
}
.round2
{
border-style:solid;
border-width:thick;
border-radius:30px;
}
.round3
{
border-style:solid;
border-width:thick;
border-radius:50px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rounded Border Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="round1"><p>Demo Text In DIV</p></div>
<div class="round2"><p>Demo Text In DIV</p></div>
<div class="round3"><p>Demo Text In DIV</p></div>
</body>
</html>
We can change the border color using border-color property of CSS.
div
{
margin:10px;
}.red
{
border-style:solid;
border-width:thick;
border-color:#F00;
}.green
{
border-style:solid;
border-width:thick;
border-color:#0F0;
}.blue
{
border-style:solid;
border-width:thick;
border-color:#00F;
}
<!DOCTYPE html>
<html>
<head>
<title>Border Color Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="red"><p>Demo Text In DIV</p></div>
<div class="green"><p>Demo Text In DIV</p></div>
<div class="blue"><p>Demo Text In DIV</p></div>
</body>
</html>
Shorthand process of Border declaration
we can minimized our border codes for simple issue.
border : width style color;
Note: Declaration of border style is madetory. If we don't declare the border style then other property border-width, border-color or border-radius will not work.
