CSS Outline Explained


The outline-style property is used to determine the style of the line that surrounds an element. It accepts various values, including:

  • The absence of a border is indicated by none. This is the same as setting
    -width to 0.
  • Outline refers to a solitary solid line.
  • Outline consists of a sequence of dotted marks.
  • The outline consists of a sequence of dashed lines.
  • The outline consists of two solid lines.
  • The groove gives the impression of an outline that appears to be carved into the page.
  • The ridge is the exact opposite of a groove in terms of its outline.
  • The use of an inset creates the illusion that the box is integrated within the page, giving it an embedded appearance.
  • At the beginning, the outline creates the appearance of the box protruding from the canvas.
  • It has the same meaning as “none.


To implement the outline-style property, you may attempt running the provided code.


This text is having thin solid outline.

This text is having thick dashed outline.

This text is having 5x dotted outline.

Frequently Asked Questions

Posted in Uncategorized