CSS Outline Width

How thick an outline looks depends on the outline-width property, which accepts one of these values:

thin — typically 1px.
medium — typically 3px.
thick — typically 5px.
a size of your own — in px, pt, cm, em, and so on.

CSS Outline Width Examples

Outlines can differ in width, as shown here.

Example

Four paragraphs, with one outline width each: thin, medium, thick, and 8px.

An HTML page that demonstrates different outline-width values.

In an internal `<style>` block, give paragraphs padding, a solid green outline, then four classes with outline-width thin, medium, thick, and 8px. Add a labeled paragraph for each.

> Output: complete HTML page

Prompt

An HTML page that demonstrates different outline-width values. In an internal <style> block, give paragraphs padding, a solid green outline, then four classes with outline-width thin, medium, thick, and 8px. Add a labeled paragraph for each.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  padding: 5px;
  outline-style: solid;
  outline-color: green;
}

p.ex1 {
  outline-width: thin;
}

p.ex2 {
  outline-width: medium;
}

p.ex3 {
  outline-width: thick;
}

p.ex4 {
  outline-width: 8px;
}
</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 8px thick outline.</p>

</body>
</html>