Without altering the size of an element, use CSS outlines to create a border-like shape around an element’s boundaries, and apply it to focused interactive elements to make your site more accessible for individuals using keyboard navigation.
Upon first glance, outline, borders, and box shadows are very similar. However, unlike borders or box shadows, an outline draws a border-like shape around the boundaries of an element. This means the outline doesn't take up additional space in your design, won’t affect the size of an element, and doesn’t cause layout shifts when it appears.
You can use outlines to replace the browser’s default focus ring styling when a site visitor uses a keyboard to tab to your interactive elements (e.g., buttons, links, and input fields). When applied correctly, outlines on interactive elements make your site more accessible to keyboard-reliant site visitors (e.g., people who have low vision, limited mobility, or attention disorders).
Note: For Safari users, you’ll have to enable “Press Tab to highlight each item on a webpage” in the Settings > Advanced panel before tabbing will work as expected.
In this lesson, you’ll learn:
Different browsers default to different outlines on interactive elements, producing inconsistent results.
To combat this inconsistency, you can use outline to override and standardize the outline behavior on all browsers, so keyboard focus on your interactive elements is legible, consistent, and accessible for your site visitors.
Because correctly setting an outline on an interactive element is critical to legibility, consistency, and accessibility, let’s walk through a few things to keep in mind when using an outline:
Outlines are meant to help your site visitors navigate through your design as they tab through your interactive elements with their keyboard. The outline that appears around an element makes it clear to your visitor they’re interacting with — they’re focused on — one particular element. If they press Tab again on their keyboard, the outline will appear around the next newly focused element.
Because of this, it’s essential to add an outline to the Focused (keyboard) state or the Focused state of your element.
Important: Do not add an outline to the None state of an element. This will override the browser’s default outline styling, and interactive elements when tabbed through will not be easily visible to site visitors. Learn more about states.
The main differences between Focused and Focused (keyboard) states are:
For our examples, we’ll add an outline to elements in the Focused (keyboard) state. To choose the Focused (keyboard) state:
Now that you’ve chosen the Focused (keyboard) state, you can add an outline to your element. But let’s first walk through how you can customize your outline’s appearance using:
The style determines the kind of outline that will surround an element. An outline can be solid, dashed or dotted.
Important: An outline with a style of “None” will remove the browser's default focus style. If there is no visible focus on an active element, it can cause individuals who rely on keyboard navigation to get lost. Please ensure your site remains accessible by always setting a solid, dashed, or dotted outline style on your outline.
The width determines the thickness of the outline. This value can use any CSS unit from the list available in the unit dropdown.
Learn more about input values and units.
Important: An outline with a width of “0” will remove the browser's default focus style. If there is no visible focus on an active element, it can cause individuals who rely on keyboard navigation to get lost. Please ensure your site remains accessible by always setting a width larger than “0” on your outline. (We recommend a width of at least 2 pixels.)
The offset determines the amount of space between an outline and the edge or border of an element. This value can use any CSS unit from the list available in the unit dropdown.
Learn more about input values and units.
The color specifies the outline’s color.
Important: Outlines used for focused states need to have a minimum of a 3:1 contrast ratio. When styling your outline, remember to take into account the contrast of the outline against the rest of the element it surrounds, as well as the content behind the element.
The outline is meant to stand out so individuals who rely on keyboard navigation can easily see the focused element. You can check the color contrast of your borders and learn more about best practices with these excellent color contrast tools:
Let’s put some of this outline styling into practice on your element:
Let’s preview how this outline behaves with your interactive elements:
At some point you may decide you don’t want to use a custom outline on an element, and you’d like to reset it to use browser defaults.
Important: While it may be tempting to choose “None” for the Outline style, remember that this will not remove any other properties that have been set (e.g., width, offset, or color), and will make your outline completely disappear, which is not accessible.
The best way to completely remove an outline is to fully reset it:
You can check if you’ve reset your outline correctly by previewing your interactive elements and tabbing through them with your keyboard. The default browser outline will appear around your elements if your outline has been correctly reset.
Let’s walk through some of the best practices to consider when using outlines in your design:
You might wonder if you can apply an outline to the regular Focused state of elements, or if it should only be added to the Focused (keyboard) state. The short answer is that it depends on your design preference.
Regardless of your design preference, the process is simple:
While default browser outlines are helpful, they don’t always offer the best visibility against certain background colors.
For example, the Safari browser always defaults to a blue outline, which works well against a white background, but can be problematic against a blue background. It becomes difficult to determine whether a button is focused if both the default browser outline and the background are blue.
While you can style a default outline on all links in your design, it’s best to still think about the different looks within your overall site design and how your outline will function within each look.
Let’s say you choose to add a blue outline around your buttons. Similar to the default Safari outline, the blue outline works great on a light background or a dark background, but it becomes invisible against a blue background.
This is where the power of customizing your outline comes in. Through classes or combo classes, you can adjust your outline for only the buttons that appear in the blue section, ensuring you have proper contrast:
Good to know: Windows High Contrast Mode allows users to set their own color value for outlines on selected text. While Windows will still respect your CSS outline values, it can override the color itself.
While you don’t have to apply an outline to every interactive element in your design, it’s important to remember that it really does impact the keyboard navigation experience for those individuals who rely on it. When in doubt, make sure to add an outline to interactive elements.
Check out a list of Webflow’s accessible elements.
Read more about accessibility:
Something went wrong while submitting the form. Please contact firstname.lastname@example.org