---
title: CSS Outline
description: "> An outline is a line drawn outside the element’s border. This element has a black border and a green outline with a width of 10px. ## CSS Outline An outline is a line that is drawn around elements, OUTSIDE…"
url: "https://apprentice.mn/docs/css-outline/"
updated: "2021-05-08"
category: CSS
---

# CSS Outline

> An outline is a line drawn outside the element’s border.

              This element has a black border and a green outline with a width of 10px.

## CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.

CSS has the following outline properties:

- `outline-style`
- `outline-color`
- `outline-width`
- `outline-offset`
- `outline`

**Note:** Outline differs from [borders](https://www.w3schools.com/css/css_border.asp)! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

---

##  

## CSS Outline Style

The `outline-style` property specifies the style of the outline, and can have one of the following values:

- `dotted` – Defines a dotted outline
- `dashed` – Defines a dashed outline
- `solid` – Defines a solid outline
- `double` – Defines a double outline
- `groove` – Defines a 3D grooved outline
- `ridge` – Defines a 3D ridged outline
- `inset` – Defines a 3D inset outline
- `outset` – Defines a 3D outset outline
- `none` – Defines no outline
- `hidden` – Defines a hidden outline

The following example shows the different `outline-style` values:

###  

Demonstration of the different outline styles:

      `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;}`

Result:

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

         [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline%2F&linkname=CSS%20Outline](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline%2F&linkname=CSS%20Outline)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline%2F&linkname=CSS%20Outline](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline%2F&linkname=CSS%20Outline)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline%2F&linkname=CSS%20Outline](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-outline%2F&linkname=CSS%20Outline)[https://www.addtoany.com/share](https://www.addtoany.com/share)