Border In CSS
Border style:
Example:
<!DOCTYPE html>
<html>
<head><title>Border Style</title></head>
<style type="text/css">
p{
padding: 10px;
width: 50%;
}
.p1{border-style: dashed;}
.p2{border-style: dotted;}
.p3{border-style: solid;}
.p4{border-style: double;}
.p5{border-style: groove;}
.p6{border-style: ridge;}
.p7{border-style: inset;}
.p8{border-style: outset;}
.p9{border-style: none;}
.p10{border-style: hidden;}
</style>
<body>
<p class="p1">This is border style dashed</p>
<p class="p2">This is border style dotted</p>
<p class="p3">This is border style solid</p>
<p class="p4">This is border style double</p>
<p class="p5">This is border style groove</p>
<p class="p6">This is border style ridge</p>
<p class="p7">This is border style inset</p>
<p class="p8">This is border style outset</p>
<p class="p9">This is border style none</p>
<p class="p10">This is border style hidden</p>
</body>
</html>
Border width and border color:
Example:
<!DOCTYPE html>
<html>
<head><title>Border Color and Border border-width</title>
<style type="text/css">
.p1{
border-style: solid; border-color: red;
height: 40px;
width: 50%;
}
.p2{
border-style: solid;
border-top-color:pink;
border-left-color:royalblue;
border-right-color:red;
border-bottom-color:yellow;
border-top-width: 2px;
border-left-width: 10px;
border-right-width: 10px;
border-bottom-width: 2px;
height: 40px;
width: 50%;
}
</style>
</head>
<body>
<p class="p1">This is Paragraph border color </p><br><br>
<p class="p2">This is Paragraph border color </p><br><br>
</body>
</html>
Border radius
Example 1:
<!DOCTYPE html>
<html>
<head><title>Border Color and Border border-width</title>
<style type="text/css">
.Box1{
background-color: blueviolet;
height: 100px;
width: 200px;
border-radius: 20px;
text-align: center;
}
.p2{
border-radius: 10px;
height: 100px;
width: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="Box1">Rounded Corner</div><br>
<div class="p2">Rounded Corner 2 </div><br>
</body>
</html>
Border radius
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>Border</title>
<style type="text/css">
.container{
text-align: center;
font-size: 20px;
width: 30%;
float: left;
}
.Container4{
border: solid 20px red;
width: 200px;
height: 200px;
border-bottom: dotted 20px blue;
border-top-left-radius: 200px;
border-bottom-right-radius: 200px;
}
</style>
</head>
<body>
<div class="container Container4">
<p>
Name
</p>
</div>
<div class="container Container4">
<p>
Name
</p>
</div>
<div class="container Container4">
<p>
Name
</p>
</div>
</body>
</html>