CSS OUTLINE WIDTH


The outline-width property specifies the width of the outline, and can have one of the following values:

  • thin (typically 1px)
  • medium (typically 3px)
  • thick (typically 5px)
  • A specific size (in px, pt, cm, em, etc)

For example:


<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}
p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: blue;
  outline-width: medium;
}
p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: orange;
  outline-width: thick;
}
p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: green;
  outline-width: 4px;
}
</style>
</head>
<body>
<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">An outline with 4px width.</p>
</body>
</html>
Live Demo!


Output:

A thin outline.

A medium outline.

A thick outline.

An outline with 4px width.