CSS outline-style

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

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.a{outline-style: dotted;}
      div.b{outline-style: dashed;}
   </style>
</head>
<body>

   <div class="a">XYZ</div>
   <br/>
   <div class="b">ABC</div>
   
</body>
</html>
Output
XYZ

ABC

CSS outline-style Syntax

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

outline-style: x;

The value of x should be any of the following:

  • solid - used to create solid styled outline
  • dashed - used to create dashed styled outline
  • dotted - used to create dotted styled outline
  • double - used to create double styled outline
  • groove - used to create groove styled outline
  • ridge - used to create ridge styled outline
  • inset - used to create inset styled outline
  • outset - used to create outset styled outline
  • hidden - used to create hidden outline
  • none - used not to create outline. This is the default value
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS outline-style Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{outline: 8px chocolate; margin: 20px 10px; padding: 12px;}
      div.a{outline-style: solid;}
      div.b{outline-style: dashed;}
      div.c{outline-style: dotted;}
      div.d{outline-style: double;}
      div.e{outline-style: groove;}
      div.f{outline-style: ridge;}
      div.g{outline-style: inset;}
      div.h{outline-style: outset;}
      div.i{outline-style: hidden;}
      div.j{outline-style: none;}
   </style>
</head>
<body>

   <div class="a">outline-style: solid</div>
   <div class="b">outline-style: dashed</div>
   <div class="c">outline-style: dotted</div>
   <div class="d">outline-style: double</div>
   <div class="e">outline-style: groove</div>
   <div class="f">outline-style: ridge</div>
   <div class="g">outline-style: inset</div>
   <div class="h">outline-style: outset</div>
   <div class="i">outline-style: hidden</div>
   <div class="j">outline-style: none</div>
   
</body>
</html>
Output
outline-style: solid
outline-style: dashed
outline-style: dotted
outline-style: double
outline-style: groove
outline-style: ridge
outline-style: inset
outline-style: outset
outline-style: hidden
outline-style: none

CSS Online Test


« Previous Tutorial Next Tutorial »



Like/Share Us on Facebook 😋