Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Default browser focus outline — do not remove */ :focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; } /* Custom focus style for buttons */ .btn:focus-visible { outline: 3px solid #fbbc04; outline-offset: 2px; border-radius: 4px; } /* Negative offset — outline inside the element */ .inset-outline:focus { outline: 2px dashed #fff; outline-offset: -4px; } /* Outline for debugging layout (no layout shift) */ * { outline: 1px solid red; } /* Accessible "skip to content" link */ .skip-link { position: absolute; top: -100%; left: 0; } .skip-link:focus { top: 0; outline: 3px solid #1a73e8; }
Result
Open