Page 1 of 1

CSS Outline Offset

Posted: Fri Oct 27, 2023 8:22 am
by Guest
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