CSS Outline Width

CSS Outline Width

Now we can change outline width in css using outline-width property.

There can be any value we can give to the property in these measurements - px, pt, cm, em, etc

But we can also use readymade values -

The values to the property are given as follows -

thin - about 1px
medium - about 3px
thick - about 5px

Now we will see example -

Example -

<!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: purple;
outline-width: 4px;}
.p5{
border: 1px solid black;
outline-style: solid;
outline-color: maroon;
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>

Output -