CSS Outline Width: The outline-width property defines the width of the outline around an element.
CSS Outline Width
The outline-width property specifies the width of the outline, and can have one of the accompanying values:
• thin (typically 1px)
• medium (typically 3px)
• thick (typically 5px)
• A specific size (in px, pt, cm, em, and so forth)
The accompanying example shows some outlines with various widths:
The outline-width Property
A thin outline.
A medium outline.
A thick outline.
A 4px thick outline.
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: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
</style>
</head>
<body>
<h2>The outline-width Property</h2>
<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>
</body>
</html>
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
