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.
Post Reply
Guest

CSS Outline Offset

Post 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
Top
Post Reply

Return to “CSS”