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>CODESCRACKER</div>
   
</body>
</html>
Output
CODESCRACKER

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 »



Like/Share Us on Facebook 😋