CSS Outline Offset
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>
Submit Answer »
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
★
+1
Reference: https://www.w3schools.com/css/css_outline_offset.asp
CSS Outline Offset
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.