CSS outline-style Property

CSS outline-style property sets the style of the outline. An outline is a line that is drawn outside the borders of an element for decoration purpose.


  outline-style: dotted;
  outline-style: dashed;
  outline-style: solid;

Below is the list of all available outline styles in CSS. Try out the below example to check how each style looks:


.p1{ outline-style: none; }
.p2{ outline-style: hidden; }
.p3{ outline-style: dotted; }
.p4{ outline-style: dashed; }
.p5{ outline-style: solid; }
.p6{ outline-style: double; }
.p7{ outline-style: groove; }
.p8{ outline-style: ridge; }
.p9{ outline-style: inset; }
.p10{ outline-style: outset; }

CSS Syntax

The outline-style property has the below syntax:

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Property Values

The outline-style property accepts the following values:

noneThis is the default value. No outline style is set.
hiddenThe outline is hidden.
dottedSpecifies a dotted outline.
dashedSpecifies a dashed outline.
solidSpecifies a solid outline.
doubleSpecifies a double outline.
grooveSpecifies a 3D groove outline.
ridgeSpecifies a 3D ridge outline.
insetSpecifies a 3D inset outline.
outsetSpecifies a 3D outset outline.
initialSets the outline-style property to its default value(none).
inheritInherits the outline-style property from the parent element.

General Info

Default Valuenone
JavaScript Usageelement.style.outlineStyle = “dotted”;


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment