Outline

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.

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).
• Add the Focus state for the element on the Styles tab in the right panel in the Styles sources section.

• On the Styles tab in the right panel, find the Appearance section and the Outline option.

• Set the values for the outline

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

Outline options

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

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

==Outline offset ==– 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.

Outline style – defines the type of the outline.

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

Example of setting up an outline:

For a form field (Input element) in the Focus state, add an outline with the following settings:
Width: 1px, Offset: 1px, Stroke style: Solid.

In preview mode or on the published site, the form field gets a blue outline when it is in focus — that is, when it is active and ready for input.