CSS outline-width

The CSS outline-width property is used to define the width of line created outside the border of an element, using either outline or outline-style property. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline-style: solid; outline-width: 4px;}
   </style>
</head>
<body>

   <div>fresherearth</div>
   
</body>
</html>

Output

fresherearth

CSS outline-width Syntax

The syntax of outline-width property in CSS, is:

outline-width: x;

The value of x should be any of the following:

thin - This keyword is used to define thin width outline
medium - This keyword is used to define medium width outline. This is the default value
thick - This keyword is used to define thick width outline
length - We can also define custom width outline using some valid length units allowed in CSS
initial - This keyword is used when we need to use the default value
inherit - This keyword is used when we need to use the value inherited by the parent element

CSS outline-width Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline-style: solid; margin: 20px 10px; padding: 12px;}
      
      div.a{outline-width: thin;}
      div.b{outline-width: medium;}
      div.c{outline-width: thick;}
      div.d{outline-width: 4px;}
      div.e{outline-width: 6px;}
      div.f{outline-width: 8px;}
   </style>
</head>
<body>

   <div class="a">outline-width: thin</div>
   <div class="b">outline-width: medium</div>
   <div class="c">outline-width: thick</div>
   <div class="d">outline-width: 4px</div>
   <div class="e">outline-width: 6px</div>
   <div class="f">outline-width: 8px</div>
   
</body>
</html>

Output

outline-width: thin

outline-width: medium

outline-width: thick

outline-width: 4px

outline-width: 6px

outline-width: 8px

CSS Online Test

« Previous Tutorial Next Tutorial »