Stroke

Published Jun 8, 2022Updated Dec 21, 2022
Contribute to Docs

A stroke, also referred to as a border, is a line that wraps around a layer. In design software, the stroke properties can be updated to customize its style, size, and color.

Stroke Properties

Diagram that compares shapes with no stroke, solid stroke, and a dashed stroke.

  • A stroke can be solid or dashed. A solid stroke is an uninterrupted line. A dashed stroke consists of dashes or small lines spaced at uniform intervals.
  • The stroke’s color and opacity can be updated from the color picker.
  • The weight, or thickness, can be increased to make the stroke more perceivable.
  • The position, or where the stroke sits on the layer, can be set to outside, inside, or center.
  • The join, or how the stroke meets at the corners, can be set to miter, bevel, or round. Note that the join style does not impact the shape’s corner radius.

Diagram comparing different join styles that can be applied to a stroke: miter, bevel, round.

Figma, a prototyping tool and graphics editor, has more information about adjusting stroke properties.

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy