CSS Outline Width:-

The outline width property specifies the width of the outline of the element and can be the value one of the below:

  • thin(thin outline can be typically 1px)
  • medium(medium outline can be typically 3px)
  • thick(thick outline can be typically 5px)
  • specific size(specific size can be px, pt, cm, em etc)

The following example shows the difference between thin, thick, medium, and specific-size outlines.



<!DOCTYPE html>

<html>

<head>

<style>

p. exp1{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thin;

}

p. exp2{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: medium;

}

p. exp3{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: thick;

}

p. exp4{

border: 1px solid black;

outline-style: solid;

outline-color: red;

outline-width: 5px;

}

</style>

</head>

<body>

<h1> The Outline-Width Property </h1>

<p class="exp1">This outline is thin outline </p>

<p class="exp2">This outline is medium outline </p>

<p class="exp3">This outline is thick outline </p>

<p class="exp4">This is specific size outline outline </p>

</body>

</html>

Try this code for a better experience