-->

CSS Border Tutorial

CSS Border Tutorial

CSS Border Tutorial

CSS Border Tutorial:

Borders can be given around HTML elements. This border can be styled with border-style, border-width, border-color etc. properties.E.g.


p.one
border-style: solid;
border-width: 3px;
border-color: maroon;
p.two
border-style: solid; border-width: medium;
p.three
border-style: double;
p.four
border-style: groove;
p.five
border-style: dotted; p.six
border-style: dashed;
p.seven
border-style: inset;
p.eight:border-style: outset; p.nine
32.border-style: ridge; p.ten
border-style: hidden;

See application

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 3px;
border-color: maroon;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three{
border-style: double;
}
p.four{
border-style: groove;
}
p.five{
border-style: dotted;
}
p.six{
border-style: dashed;
}
p.seven{
border-style: inset;
}
p.eight{
border-style: outset;
}
p.nine{
border-style: ridge;
}
p.ten{
border-style: hidden;
}
</style>
</head>
<body>
<p class = "one"> Myhtmlcode </p>
<p class = "two"> Myhtmlcode </p>
<p class = "three"> Myhtmlcode </p>
<p class = "four"> Myhtmlcode </p>
<p class = "five"> Myhtmlcode </p>
<p class = "six"> Myhtmlcode </p>
<p class = "seven"> Myhtmlcode </p>
<p class = "eight"> Myhtmlcode </p>
<p class = "nine"> Myhtmlcode </p>
<p class = "ten"> Myhtmlcode </p>
</body>
</html>


Border-width property will not work if it is alone, you have to come with border-style first.


There are 4 different styles for the surrounding border


border-left-width: 10px;
border-right-width: 10px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: ridge;

Facebook Comments

Follow by Email