Stroke
Published Jun 8, 2022Updated Dec 21, 2022
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

- 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.

Figma, a prototyping tool and graphics editor, has more information about adjusting stroke properties.
Learn UI and UX Design on Codecademy
- Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
- Includes 34 Courses
- With Professional Certification
- Beginner Friendly.115 hours
- Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.
- Beginner Friendly.2 hours