TryIt Editor v2.0 - CSS outline-width code example

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

.p1 {

outline-style: solid;

outline-width: 5px;

}

.p2 {

outline-style: solid;

outline-width: 0.4em;

}

.p3 {

outline-style: solid;

outline-width: thin;

}

.p4 {

outline-style: solid;

outline-width: medium;

}

.p5 {

outline-style: solid;

outline-width: thick;

}

.p6 {

outline-style: solid;

outline-width: 0.1cm;

}

.p7 {

outline-style: solid;

outline-width: 1mm;

}

</style>

</head>

<body>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-width: 5px;
      }
      .p2 {
        outline-style: solid;
        outline-width: 0.4em;
      }
      .p3 {
        outline-style: solid;
        outline-width: thin;
      }
      .p4 {
        outline-style: solid;
        outline-width: medium;
      }
      .p5 {
        outline-style: solid;
        outline-width: thick;
      }
      .p6 {
        outline-style: solid;
        outline-width: 0.1cm;
      }
      .p7 {
        outline-style: solid;
        outline-width: 1mm;
      }
    </style>
  </head>
  <body>
    <h2>Outline-width property example</h2>
    <p class="p1">This is a paragraph with outline set to 5px.</p>
    <p class="p2">This is a paragraph with outline set to 0.5em.</p>
    <p class="p3">This is a paragraph with outline set to thin.</p>
    <p class="p4">This is a paragraph with outline set to medium.</p>
    <p class="p5">This is a paragraph with outline set to thick.</p>
    <p class="p6">This is a paragraph with outline set to 0.1cm.</p>
    <p class="p7">This is a paragraph with outline set to 1 mm.</p>
  </body>
</html>