CSS outline-offset Property
Description
The outline-offset CSS property is used to control the space between an element's outline and its border or content. It allows web developers to adjust the distance between the outline and the element's edges, helping to improve the visual design and accessibility of elements like buttons or links. By increasing or decreasing the offset, designers can fine-tune the appearance of outlines, ensuring they do not overlap with neighboring elements and providing a more aesthetically pleasing and user-friendly experience for website visitors.
- Initial value
- 0
- Applies to
- All elements
- Inherited
- No
- Computed value
- [length] value in absolute units (px or physical)
- Animatable
- No
- JavaScript syntax
- object.style.outlineOffset
Interactive Demo
The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.
Syntax
outline-offset: <length> | inherit
Values
- <length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
- inherit
Example
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>.block {
outline: 3px dotted blue;
outline-offset: 10px;
padding: 10px;
border: 3px solid red;
margin: 20px;
}Browser Support
The following table will show you the current browser support for the CSS outline-offset property.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 15 | 1 | 1.5 | 9.5 | 1.2 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 2nd January 2024