Outline-offset does not get applied on Chrome/ Windows when outline-style is auto

Question

I am applying a style to the focused element that is on the lines of:

.<class-name>:focus {
  outline: 4px auto #068065 !important;
  outline-offset: 2px !important;
}

(This is part of a Chrome extension code, so it does not need to be cross-browser).

The issue is that the outline-offset does not get applied on Chrome/Windows when the outline-style is "auto". On Chrome/Mac, this works fine.

If I change the outline-style from "auto" to "solid", the outline-offset works just fine.

I would like to be able to use both the "auto" style and the outline offset. Any thoughts or suggestions?

Answer 1

I found out how to adjist the outline-offset on a DIV or other element in Chrome.

The default outline-style: auto means that the browser can choose the style, and outline-offset doesn't work with that style in Chrome. We can use outline-offset with outline-style: solid.

div {
    outline-color: #068065;
    outline-style: solid;
    outline-offset: 4px;
    outline-width: 4px;
    
    border: 1px solid red;  /* for comparison */
}

<h1>Testing</h1>

<div>
Hello, world
</div>

Answer 2

EDIT:

I guess I found a fix.

try adding display: inline-block to the element where you apply your outline on. that should work

---

You are using the shorthand for outline-* this will not work you have to use all the outline-functions like this:

outline-color: #068065;
outline-style: auto;
outline-offset: 2px !important;
outline-width: 4px;

Hope it helps!