CSS Outline Offset

❮ Previous Next ❯

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.

Example

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
Try it Yourself »

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.

Example

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}
Try it Yourself »

Test Yourself With Exercises

Exercise:

Set a solid, 5px outline border for the <div> element.

<style>
div {
  : solid;
  : 5px;
}
</style>

<body>

<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>

</body>

Start the Exercise

All CSS Outline Properties

Property Description
outline A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color Sets the color of an outline
outline-offset Specifies the space between an outline and the edge or border of an element
outline-style Sets the style of an outline
outline-width Sets the width of an outline

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.