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
- 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.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn UI and UX Design on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Introduction to UI and UX Design
Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.Beginner Friendly2 hours