CSS Outline Offset

The outline-offset property allows you to control the space between the outline and the border of the element. It creates a gap or an offset around the outline, giving it some breathing space from the element's borders.

The syntax for the outline-offset property is as follows:

        
            selector {
    outline-offset: length;
}
        
    

• The selector represents the HTML element or class/id selector to which you want to apply the outline offset.
• The length specifies the desired offset distance between the outline and the border of the element. It can be specified using length values (e.g., 2px, 10px, etc.) or any valid CSS length notation.

        
            button {
    outline: 2px solid red;
    outline-offset: 5px; /* Adds a 5-pixel gap between the outline and the element's border */
}
        
    

In the above example, the button element will have a solid red outline with a width of 2 pixels, and the outline will be 5 pixels offset from the element's border, creating a gap between the outline and the content inside the button.

Keep in mind that the outline-offset property does not affect the size or layout of the element. It only changes the spacing between the outline and the border. Also, the outline-offset property does not work in Internet Explorer and some older browsers, so be mindful of browser compatibility if you plan to use it.