The stroke panel controls the arrangement, weight, decoration, and shape of an element’s border.

Applying strokes to the top or bottom of components is a good way to create a horizontal line across the page, which can be useful for visually separating content.

To use the Stroke Panel, select an element, then open the panel by clicking the icon on the left toolbar, selecting it from the "Window" menu, or typing <shift>-S on your keyboard.
​

Sets the thickness of the border line, in pixels.

Sets the style of the border line. You can create different visual effects by making the border dotted, dashed, grooved, double, ridged, inset or outset.

These toggles allow you to specify which sides of the element will have the stroke applied. Any combination of sides can be selected by clicking multiple buttons.

These inputs set the roundness of the element's corners. Larger values equate to more rounded corners. 

Corner roundness can be defined using a pixel value, or a percentage.

If you want to ensure that all four corners of the element always have the same roundness, check the "Link All" box before entering a value. As long as this option remains checked, it will automatically adjust all the values to match every time you make a change.

Note that if you want a border to be applied to an element's hover state, you also need to set the default value (0px) in order for the hover state to work:

The border grows in and can push content beneath the element with the stroke hover state, so for a smoother transition you might want to always have the stroke present, just change the color to make the border the same color as the background or set the color opacity to 0 to make it look like it's not there.