In the element settings, you can enable outline along the contour and customize the style, color, and width of the line that will be used to outline the element.
Currently, outline can be added to a Shape element.

Adding outline

To enable the above feature, you will need to:
Open element settings:

Scroll down the menu and activate the Outline switch:

After this, a standard outline will appear in the selected element:

Customization of the outline

The line around the element can be customized to your preferences:

Selecting width of the outline:

Tip: Default width is 2 pixels, maximum width is 30 pixels.

Choosing outline style:

There are three styles to choose from: solid, dashed, and dotted.

Note: In dashed and dotted styles, the space between dashes/dots is transparent. That is, the background behind the element will be visible between each line or stroke point, not the element itself.
Tip: After adding outline, the visible part of the element will become smaller, because the outline does not increase the pixel size of the element. If you are adding extensive outline, you can add more if necessary so that, for example, the same part of the image is visible that was visible before you applied the outline.

Selecting outline color:

You can choose one of the standard site palette colors or any other color at your discretion.

After setting all the parameters, the outline may take, for example, the following form:

Don't forget to publish the site to apply the recently made changes.

For advanced users: Technically, the outline is a border that is added to the inside of an element without increasing its size. That is, the element to which the outline is added has a CSS property box-sizing with a value of border-box.

Updated on: 12/04/2023