CSS Introduction | CSS Box Model | Outline

Tags:

Outline

The outline property sets the style of the outline area surrounding the outermost part of an HTML element. Like the border property, this property has style, width, and color properties.

Unlike the border property, however, the outline property is not included in the total size of an HTML element. The height or width of an HTML element is not affected by the thickness of the outline.

CSS outline Properties

Property Description
outline Sets styles using all outline properties in one line.
outline-style Sets the outline in various shapes.
outline-width Sets the width of the outline.
outline-color Sets the color of the outline.
outline-offset Sets the space between the border and the outline.

outline-style Property

With the outline-style property, you can set the outline in various shapes.

  1. dotted: Sets the outline as a dotted line.
  2. dashed: Sets the outline as a slightly longer dashed line.
  3. solid: Sets the outline as a solid line.
  4. double: Sets the outline as a double solid line.
  5. groove: Sets the outline as a three-dimensional grooved line, affected by the outline-color value.
  6. ridge: Sets the outline as a three-dimensional ridged line, affected by the outline-color value.
  7. inset: Sets the outline as a three-dimensional inset line, affected by the outline-color value.
  8. outset: Sets the outline as a three-dimensional outset line, affected by the outline-color value.
  9. none: Removes the outline.
  10. hidden: The outline exists but is not displayed.
<style>
    p.dotted {outline-style: dotted;}
    p.dashed {outline-style: dashed;}
    p.solid {outline-style: solid;}
    p.double {outline-style: double;}
    p.groove {outline-style: groove;}
    p.ridge {outline-style: ridge;}
    p.inset {outline-style: inset;}
    p.outset {outline-style: outset;}
    p.none {outline-style: none;}
    p.hidden {outline-style: hidden;}
</style>

In Internet Explorer 8 and earlier, the <!DOCTYPE html> tag must be inserted in the HTML document for the outline property to be displayed correctly.

outline-width Property

The outline-width property sets the thickness of the outline. You can set the thickness directly using CSS size units such as px, em, and cm. You can also use predefined keywords such as thin, medium, and thick.

<style>
    p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }
    p.solidB { outline-style: solid; outline-color: coral; outline-width: 7px; }
    p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }
    p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }
</style>

outline-color Property

The outline-color property sets the color of the outline. In addition to regular color property values, you can use the invert value, which represents color inversion. The invert value sets a color inversion so the outline can be shown regardless of the background color.

<style>
    p { border: 1px solid black; outline-style: dashed; }
    p.red { outline-color: red; }
    p.green { outline-color: rgb(0,255,0); }
    p.blue { outline-color: #0000FF; }
    p.invert { outline-color: invert; }
</style>

Outline Shorthand

You can set styles using all outline properties in one line.

<style>
    p { border: 1px solid black; }
    p.none { border-style: none; }
    p.good { outline: 3px solid teal; }
    p.wrong { outline: 5px teal; }
</style>

To set the outline property, the outline-style property must be set first.