<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
p.dotted {outline: 4px dotted gray;}
p.dashed {outline: 0.2em dashed rgb(142,191,66);}
p.solid {outline: 4px solid #ccc;}
p.double {outline: 4px double #000;}
p.groove {outline: 4px groove #666;}
p.ridge {outline: thick ridge #1c87c9;}
p.inset {outline: medium inset #1c87c9;}
p.outset {outline: 4px outset #1c87c9;}
</style>
</head>
<body>
<h2>Пример свойства outline</h2>
<p class="dotted">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="dashed">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="solid">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="double">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="groove">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="ridge">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="inset">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
<p class="outset">Lorem Ipsum - это текст-"рыба", часто используемый в печати </p>
</body>
</html>