Improve keyboard navigation with outline styling and keyboard focus state

<p>When you navigate a website with your keyboard, browsers often create a default focus ring on interactive elements like links and buttons. But what if you want to customize the look of that focus ring? Until now, you haven’t been able to do this in Webflow without custom code.</p><p>But now you can, with two new options:</p><ol><li><strong>Outline styling</strong> — this effect allows you to set the style of the focus ring around an element without impacting your site’s layout, bringing the <a href="<https://developer.mozilla.org/en-US/docs/Web/CSS/outline>">outline CSS property</a> into Webflow. (Note: these new options differ from the <a href="<https://university.webflow.com/lesson/borders>">borders property</a> — outline styling and keyboard focus state won’t affect the size of an element, so they will not cause any layout changes.)</li><li><strong>Keyboard focus state</strong> — with this option the outline styling of an element will only be visible when a user navigates the page with their keyboard, but won’t show up for mouse clicks. In other words, this brings the <a href="<https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible>">focus-visible CSS property</a> into Webflow.</li></ol><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1500px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1500px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d616W1z0DxDRW3qVBD2L4C1UT2QiCVKEcDKuTCaVgj9RmKRdBrAf4Hg3nOy3TSsaiOYcuf7ooMtDyPOOGVFkxDhsTTr6kySUGCHtn-3H8SQdXkKGFozNoKcfvi9wYsi9NTnjD-dwV-.jpeg>" width="auto" height="auto" loading="auto" alt="Outline styling allows you to customize the look of the focus ring around an element without impacting your site’s layout."></div><figcaption>Outline styling allows you to customize the look of the focus ring around an element without impacting your site’s layout.</figcaption></figure><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1500px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1500px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d611vlDIh3kMWQwaoWV63vaH91sMWoB2LrWGNZC5ygjTa2D3S5XC5PiiI7zMaISOWm42VeR1YWJn1K55EPohoWQoCQlhi7_FrGnZU0UWIX6MFYyL-fVvt15I6nzyc56BEYJzYgbvc9qC.jpeg>" width="auto" height="auto" loading="auto" alt="With focused (keyboard) state, the outline styling of an element will only be visible when a user navigates the page with their keyboard."></div><figcaption>With focused (keyboard) state, the outline styling of an element will only be visible when a user navigates the page with their keyboard.</figcaption></figure><p>When used together, these two features allow you to better style a browser’s default focus ring to make it more noticeable, accessible, and inline with your site’s branding. Outline styling is called ‘outline’ in Webflow and is discoverable in the style panel under the effects section. Keyboard focus state is called ‘focused (keyboard)’ in Webflow and is discoverable in the style panel in the <a href="<https://university.webflow.com/lesson/states>">states</a> dropdown menu. </p><p>For more in-depth information on these features, check out our <a href="<https://university.webflow.com/lesson/outlines>">Webflow University documentation</a> for a closer look.</p>