Outlines
There’s a reason Apple, Wikipedia, and MDN use CSS outline on their production sites (with an exception for Apple’s rounded buttons). Without altering the size of an element, outlines creates a border-like shape outside an element’s boundaries and overrides the default focus outline behavior across all browsers.
Video transcript
Outlines in CSS let you add a visible border around an element that doesn't affect the element's size or layout. Unlike borders, outlines don't take up space in the box model — they're drawn on top of surrounding content.
The most common use case for outlines is focus indicators. When a user navigates a page using a keyboard, the browser adds an outline to the currently focused element — a link, button, or form field — to show where keyboard focus is. This is critical for accessibility: removing or hiding outlines without providing an alternative focus style makes sites much harder to use for keyboard users.
In Webflow, you can control outline styles through the Style panel's Focus state. You can change the outline color, style, and width for focused elements. The important thing is to never completely remove focus outlines without replacing them with something equally visible — many users depend on them.
Outlines can also be used for purely aesthetic purposes — a highlighted selection state, a draggable element indicator, or a design accent. But their primary and most important role is as focus indicators for keyboard navigation.
