Stroke style and arrowheads
Control dash patterns, line caps, joins, and arrowheads on strokes.
Accessing stroke style settings
Stroke style options appear in the Strokes section of the inspector when a layer with a stroke is selected. Click the advanced stroke button (the three-dot icon) next to a stroke entry to expand the detailed options.
Dash style
By default, strokes are drawn as a solid line. Switch to Dashed to draw a repeating pattern of dashes and gaps.
| Setting | What it controls |
|---|---|
| Dash | Length of each dash segment in pixels |
| Gap | Space between dashes in pixels |
| Dash offset | Shifts the starting position of the dash pattern along the path |
A dash and gap of equal length produces evenly spaced dots (when used with round caps). A long dash with a short gap produces a classic dashed line.
Line cap
Line cap controls how the endpoints of an open path or individual dash segments are drawn:
| Cap | Appearance |
|---|---|
| Butt | Flat end exactly at the path endpoint. Default. |
| Round | Semicircle extends beyond the endpoint by half the stroke width. |
| Square | Square extends beyond the endpoint by half the stroke width. |
Round caps on a dashed stroke with zero dash length and a gap equal to the stroke width creates a dotted line.
Line join
Line join controls how corners are rendered where two path segments meet:
| Join | Appearance |
|---|---|
| Miter | Sharp pointed corner. Default. Pointed corners can be long on acute angles. |
| Round | Rounded corner proportional to the stroke width. |
| Bevel | Corner is cut flat, producing a chamfered edge. |
Arrowheads
Lines and open paths can have arrowheads at either endpoint. Select the arrowhead shape for the start and end of the path independently.
Available arrowhead shapes include standard arrows, open arrows, circles, squares, and diamond points. Set to None for no arrowhead.
Arrowhead size scales with the stroke width — increasing the stroke weight also increases the arrowhead proportionally.
Tips
- For connector lines in diagrams, use a closed arrowhead on the end and None on the start, with a Miter join for sharp corners.
- Dotted borders: use a Round cap, set Dash to 0, and Gap to 2× your desired dot spacing.
- Round joins soften the look of icon shapes that have sharp path corners — especially useful for rounded UI components.
- Combine a dashed stroke with Dash offset animation (when available) to create a marching-ants selection effect in prototypes.