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 »