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.
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
- Set the values for the outline
The outline is visible with the ruler disabled (Shift+O).
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.