Posted By
Bajarangi soft ,
Posted On 29-09-2020
1.Create a Html Doc with Outline property using Css
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid mediumspringgreen;
outline-style: solid;
outline-color: mediumvioletred;
outline-width: thin;
outline-offset: 15px;
}
p.ex2 {
border: 1px solid darkred;
outline-style: solid;
outline-color:blue;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: green;
outline-width: thick;
}
p.ex4 {
border: 1px solid yellow;
outline-style: solid;
outline-color: invert;
outline-width: medium;
}
</style>
</head>
<body>
<h2>The outline-width Property</h2>
<h2>offset outline</h2>
<p class="ex1">A thin outline.</p><br>
<p class="ex2">A medium outline.</p><br>
<p class="ex3">A thick outline.</p><br>
<p class="ex4">A 4px thick outline.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
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;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">Bajarangi Soft.</p>
<p class="dashed">Bajarangi Soft.</p>
<p class="solid">Bajarangi Soft.</p>
<p class="double">Bajarangi Soft.</p>
<p class="groove">Bajarangi Soft.</p>
<p class="ridge">Bajarangi Soft.</p>
<p class="inset">Bajarangi Soft.</p>
<p class="outset">Bajarangi Soft.</p>
<p class="none">Bajarangi Soft.</p>
<p class="hidden">Bajarangi Soft.</p>
<p class="mix">Bajarangi Soft.</p>
</body>
</html>