Q.No.8 - Design a simple web page with different type of Border Style and paragraph written inside the using CSS ?
Sol.-
<html>
<head>
<title>Practical- Examcomp</title>
<style type="text/css">
p{
font-size: 20px ;
width: 60%;
}
.dotted {
border-style: dotted;
}
.solid {
border-style: solid;
}
.dashed {
border-style: dashed;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.inset {
border-style: inset;
}
.outset{
border-style: outset;
}
.ridge {
border-style: ridge;
}
</style>
</head>
<body>
<h1>Boder Styles in CSS</h1>
<p class="dotted">There are so many border property in CSS. Here is we use border-style property:dotted;.</p>
<p class="solid">There are so many border property in CSS. Here is we use border-style property:solid;.</p>
<p class="dashed">There are so many border property in CSS. Here is we use border-style property:dashed;.</p>
<p class="double">There are so many border property in CSS. Here is we use border-style property:double;.</p>
<p class="groove">There are so many border property in CSS. Here is we use border-style property:groove;.</p>
<p class="inset">There are so many border property in CSS. Here is we use border-style property:inset;.</p>
<p class="outset">There are so many border property in CSS. Here is we use border-style property:outset;.</p>
<p class="ridge">There are so many border property in CSS. Here is we use border-style property:ridge;.</p>
</body>
</html>
OUTPUT:
![](pr28o.png)