<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid red;}
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
</style>
</head>
<body>
<h1>The outline-style Property</h1>
<p class="a">A dotted outline</p>
<p class="b">A dashed outline</p>
<p class="c">A solid outline</p>
<p class="d">A double outline</p>
<p class="e">A groove outline</p>
<p class="f">A ridge outline</p>
<p class="g">An inset outline</p>
<p class="h">An outset outline</p>
</body>
</html>