Stroke Position

Stroke position determines where the stroke is drawn relative to the path: centered on the path, entirely inside, or entirely outside. This affects the visual size of shapes and is crucial for precise designs.

Stroke Position Options

Center (Default)

• Stroke is centered on the path
• Half the stroke width extends inward
• Half extends outward
• Standard behavior in most design tools

Inside

• Entire stroke is drawn inside the path
• Shape's outer edge matches the path exactly
• Useful for borders that don't affect layout
• Stroke reduces the visible fill area

Outside

• Entire stroke is drawn outside the path
• Shape's inner edge matches the path exactly
• Useful for highlighting or outlines
• Stroke extends beyond the bounding box

Setting Stroke Position

1. Select an element with a stroke
2. In the Properties panel, find the Stroke section
3. Click the position icons (center/inside/outside)
4. Or use the dropdown menu

Visual Impact

For a 100px square with 10px stroke:

Position	Visual Size	Fill Area
Center	110px x 110px	100px x 100px
Inside	100px x 100px	90px x 90px
Outside	120px x 120px	100px x 100px

Use Cases

Inside Stroke

• UI Borders - Add borders without affecting component size
• Form Fields - Input borders that don't shift layout
• Cards - Subtle borders within defined dimensions
• Buttons - Consistent button sizes regardless of border

Outside Stroke

• Selection States - Highlight without covering content
• Focus Rings - Accessibility focus indicators
• Hover Effects - Growing outline effect
• Stickers/Labels - White outline around icons

Center Stroke

• Illustrations - Traditional vector art style
• Icons - Balanced line weight distribution
• Diagrams - Symmetric line appearance

With Corner Radius

Stroke position affects how corners appear:

• Inside - Corner radius appears smaller
• Outside - Corner radius appears larger
• Center - Corner radius as specified

Open Paths

For open paths (lines, arcs):

• Inside/Outside only affects closed portions
• Line caps still extend from endpoints
• Use "Outline Stroke" to convert to filled shape

CSS Export

• Center - Standard border
• Inside - Uses box-shadow: inset or outline-offset: -Xpx
• Outside - Uses box-shadow or outline

Tips

• Use Inside for UI components to maintain consistent sizing
• Outside stroke is great for focus states in accessibility
• Center is best for illustrations and icons
• Consider stroke position when designing to a grid