CSS Outline Offset
Posted: Fri Oct 27, 2023 8:22 am
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
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