Design and Styling
Effects

Outline

3min





Outline helps visitors navigate a website as they move from one interactive element to another using the keyboard. The outline around an element makes it clear to the visitor that he or she is interacting with a specific interactive element. If the site visitor presses Tab on the keyboard, the outline will appear around the next element with the focus.

It makes sense to add the outline to an element in the Focus state.



Adding the outline

To outline an element:

  • Select the one for which you want to add the outline (it must be an interactive element, such as a form field or a button)
  • Select the Focus state for the element on the Styles tab in the right panel in the State section
  • On the Styles tab in the right panel, find the Effects section and the Outline option
Document image

  • Set the values for the outline

The outline is visible with the ruler disabled (Shift+O). 



Outline options 

Color – defines the color of an element and its opacity.

Width – defines the weight of the outline. By default, it is set in pixels (px). You can change the unit of measurement.

Move – defines the space between the element's border and the outline. By default, it is set in pixels (px). You can change the unit of measurement.

Style – defines the type of the outline. 

  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Ridge
  • Inset
  • Outset



Updated 05 Oct 2023
Did this page help you?