<!DOCTYPE html>
<html lang="en">
<head>
<style>
.p1{
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
.p2{
border: 1px solid black;
outline-style: solid;
outline-color: pink;
outline-width: medium;}
.p3{
border: 1px solid black;
outline-style: solid;
outline-color: rgb(0, 153, 255);
outline-width: thick;}
.p4{
border: 1px solid black;
outline-style: solid;
outline-color: #00ff00;
outline-width: 4px;}
.p5{
border: 1px solid black;
outline-style: solid;
outline-color: rgb(9, 191, 236);
outline-width: 8px;}
.p5{
border: 1px solid black;
outline-style: solid;
outline-color: hsl(271, 100%, 50%);
outline-width: 8px;}
</style>
</Style>
<link rel="stylesheet" href="sample.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="p1">A dotted outline</p>
<p class="p2">A dashed outline</p>
<p class="p3">A solid outline</p>
<p class="p4">A double outline</p>
<p class="p5">A groove outline</p>
</body>
</html>
|