Stroke Properties
The stroke is an outline rendered along the path of a shape. Stroke settings are configured independently of the fill layers.
Enabling Stroke
Toggle the stroke on or off using the Stroke toggle in the Properties Panel. Each shape can have one stroke.
Stroke Color
The stroke color is configured via the same color picker as fills. It supports solid color only (not gradient) in the base configuration. For gradient strokes, see the Gradient Stroke section below.
Stroke Weight
The width of the stroke in pixels. Range: 0.1px to 500px.
Stroke Alignment
Controls where the stroke is rendered relative to the path:
| Alignment | Description |
|---|---|
| Center (default) | The stroke is centered on the path — half inside, half outside the shape boundary |
| Inside | The entire stroke width is inside the shape boundary |
| Outside | The entire stroke width is outside the shape boundary |
Stroke alignment affects how the shape's apparent visual size compares to its defined geometry, which is important when precise positional accuracy matters.
Stroke Cap and Join
Cap Style (for open paths and line segments)
- •Butt — flat ends at the exact path endpoint
- •Round — semicircular ends extending beyond the endpoint
- •Square — flat square ends extending beyond the endpoint by half the stroke width
Join Style (at corners where two segments meet)
- •Miter — sharp pointed corner; a Miter Limit controls how far the point can extend before it is auto-converted to a Bevel
- •Round — rounded corner at the junction
- •Bevel — a flat cut across the outer corner
Dash Settings
Converts the stroke to a dashed line:
- •Dash Length — length of dash segments in pixels
- •Gap Length — length of gaps between dashes in pixels
- •Additional Dash/Gap pairs — up to three dash/gap pairs can be defined for complex dash patterns (e.g., long-dash short-dash)
- •Dash Offset — shifts the pattern along the stroke. Animating this value creates a "marching ants\" animation effect.
- •Dash Cap — independently sets the cap style for the ends of each dash segment
Gradient Stroke
A stroke can be filled with a gradient rather than a solid color. When enabled:
- •Along Stroke — the gradient runs from the start of the path to the end (start point = first color stop, end point = last color stop)
- •Across Stroke — the gradient runs perpendicular to the stroke direction (inner edge = first color stop, outer edge = last color stop)
The stroke system applies identically to text elements. See the Text documentation for typography-specific stroke behavior.