---
title: CSS Outline Offset
description: "The `outline-offset` property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent. The following example specifies an outline 15px outside the border edge: This paragraph has an outline 15px outside…"
url: "https://apprentice.mn/docs/css-outline-offset/"
updated: "2021-05-08"
category: CSS
---

# CSS Outline Offset

The `outline-offset` property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

The following example specifies an outline 15px outside the border edge:

This paragraph has an outline 15px outside the border edge.

     `p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}`

The following example shows that the space between an element and its outline is transparent:

This paragraph has an outline of 15px outside the border edge.

     `p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}`

## All CSS Outline Properties

| Property | Description |
| --- | --- |
| [outline](https://www.w3schools.com/cssref/pr_outline.asp) | A shorthand property for setting outline-width, outline-style, and outline-color in one declaration |
| [outline-color](https://www.w3schools.com/cssref/pr_outline-color.asp) | Sets the color of an outline |
| [outline-offset](https://www.w3schools.com/cssref/css3_pr_outline-offset.asp) | Specifies the space between an outline and the edge or border of an element |
| [outline-style](https://www.w3schools.com/cssref/pr_outline-style.asp) | Sets the style of an outline |
| [outline-width](https://www.w3schools.com/cssref/pr_outline-width.asp) | Sets the width of an outline |

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