Outlines

Updated

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.

When to use an outline

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.

How to add an outline to interactive elements

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:

The importance of setting your outline on the Focused (keyboard) state

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: 

  • The Focused state encompasses all states of focus (e.g., via mouse, finger taps, and keyboard). Additionally, any styles added to the element’s “Focused” state will be inherited by the Focused (keyboard) state.
  • The Focused (keyboard) state only applies to keyboard focus, (e.g., a site visitor using the Tab key to navigate between interactive elements on your site). Site visitors won’t see this style when they use a mouse or a finger tap to activate the element.

For our examples, we’ll add an outline to elements in the Focused (keyboard) state. To choose the Focused (keyboard) state:

  1. Select your element (e.g. a button)
  2. Open the Style panel
  3. Click the dropdown in the Selector field to open the States menu
  4. Choose the Focused (keyboard) state

How to customize your outline appearance

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: 

Style

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. 

Width

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.)

Offset

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.

Color

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:

  1. Select your element and make sure it’s in the Focused (keyboard) state
  2. Open Style panel > Effects
  3. Choose a solid, dashed, or dotted line from Outline style options to make sure your outline is visible to your site visitors (by default it’s set to “None”)
  4. Type in your preferred outline width (the default is set to 3 pixels; we recommend 2 pixels or larger)
  5. Type in your preferred offset (by default it’s set to 0 pixels)
  6. Choose your outline’s color (by default it uses the element’s current font color)

How to preview your outline in your browser

Let’s preview how this outline behaves with your interactive elements:

  1. Press the “Escape” key on your keyboard to exit the Focused (keyboard) state of the element
  2. Press the “eye” icon in the top left of the Designer to preview your design 
  3. Tap anywhere in the Webflow canvas
  4. Press “Tab” and “Shift+Tab” on your keyboard to move focus back and forth through your interactive elements

How to reset an outline to use browser defaults

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: 

  1. Select your element that contains the outline you want to reset
  2. Open the Style panel 
  3. Click the dropdown in the Selector field to open the States menu
  4. Select the state that contains the outline (e.g., Focused (keyboard) or Focused)
  5. Scroll down to Effects
  6. Click Outline
  7. Choose “Reset”

Good to know

To quickly reset all your outline properties, hold Option (Mac) or Alt (Windows) and click Outline.

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.

Best practices when using outlines

Let’s walk through some of the best practices to consider when using outlines in your design: 

Choose which state to select when adding an outline

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: 

  • Choose the Focused state if you want your outline visible on any click, tap, or keyboard tab-through
  • Choose the Focused (keyboard) state if you want your outline accessible for keyboard navigation, but prefer your links to not show an outline on clicks or taps

Style your outline with contrast in mind

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:

  1. Select your button element
  2. Open the Style panel
  3. Click the dropdown in the Selector field to open the States menu
  4. Choose the Focused (keyboard) state
  5. Scroll to Style panel > Effects
  6. Change your outline’s color (e.g., from blue to white)

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.

Add an outline to all interactive elements

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:

Related articles