HTML, CSS, CSS Variables and Flexbox and Javascript

If you use :focus-visible and add an outline there, then it will only show when a user interacts with your button with the keyboard, and not with a mouse.

If you use outline rather than border than you won't get layout shifts either, as outline isn't calculated in the element size so the size won't change when it's added and removed

Hi David, I'm not sure there is another way - the border is there because the input is still in focus. I guess in theory, you could remove it with JS? But that would be messing with behaviour that users expect when browsing so it's not a good idea. What you could do is make the focus styles go with the design more. You can use box shadows for example to have a white ring around the toggle (check out how bootstrap does their focus styles, I think it's quite nice - note that you don't need to include bootstrap here, just check out their styling).

Hope this helps :)