Before you start

Who can use this feature

Supported on any team or plan.

Anyone with can edit access can view and update stroke properties.

Strokes are a collection of properties you can apply to layers in design files. You can think of strokes as the visual representation of a vector path. Use stroke properties to:

• Add outlines around shapes, vector networks, or boolean operations
• Create lines and arrows
• Add borders to images
• Add strokes to individual sides of rectangular layers, like rectangles, frames, and components

You can control the appearance of a stroke with color, weight, distribution, side, and end point properties.

Stroke properties

View and adjust stroke properties in the Stroke section of the right sidebar.

Paints

Paint is the main property you’ll use to define the stroke. You can apply more than one paint (color) to a stroke. This includes gradient and image paints. Paints must share the same weight, position, and style properties.

1. Use the color picker to select a paint type, value, and opacity.
2. Click to add another paint to the current selection.
3. Select or to toggle the visibility of each paint.
4. Select to open the Style picker. From there you can apply a color style or create a new one from the current selection.
5. Select to remove the stroke from the selected layer.

Position

Figma lets you define where to apply the stroke on the layer’s path. Choose from Inside, Outside, or Center. The default option for most shape layers is Inside, except lines which are set to center.

The SVG format only supports center stroke. This is something to consider if you plan on exporting the layer as an SVG.

When you export a layer with inside or outside stroke to SVG, Figma will “simplify” the stroke. This makes an inside or outside stroke look like a center stroke. This won't affect the appearance of the exported object, but it will impact the complexity of the SVG code.

Learn more about simplify stroke →

Weight

Use the field to select the weight of the stroke, in pixels. Enter a value, or focus on the field and scroll through values using your mouse or trackpad.

Individual strokes

By default, Figma applies the stroke properties to all sides of a layer. If your layer is a rectangle, frame, or component/instance, you’ll also have a Stroke per side property.

Use the Stroke per side property to choose which side or sides to apply the stroke.

• All (default)
• Top
• Bottom
• Left
• Right
• Custom: to choose which sides to apply stroke. Custom also allows you to set a different stroke weight per side.

Custom strokes per side

When you select custom, you’ll see four individual fields in the Stroke section. Use the fields to adjust the weight for each side independently. To remove a stroke from a side, set the weight to 0.

You can use individual strokes to create common design elements and patterns:

• Apply a single stroke to the top or bottom of a row in a table
• Show a horizontal line underneath a section header or divider
• Apply a border to only three sides of an element
• Add a color block to the left side of a card or task element

End points

Add styling to the end points of any open ended paths. The end point property will show up in two different locations, depending on the vector path you have selected.

Only two end points

If the layer is an open vector path, you can set the endpoints at the start and end of the vector path in the main Stroke section. For example: line and arrow shapes.

Use the two fields to set the cap or tip style ↓ for the start (left) and end (right) endpoints.

More than two endpoints

If you have a closed vector path or shape—or an open path with more than two end points—you’ll find the end points settings in the Advanced stroke menu instead.

If you have the entire layer selected, you can use the End points property to set the same tip or cap style for all endpoints.

To edit them independently, you need to select each end point in vector edit mode:

1. With the layer selected, press Enter / Return to open vector edit mode →
2. Select a single end point. You can identify the selected end point by the blue circle with a white stroke.
3. Select the in the Stroke section of the right sidebar to open the Advanced stroke menu.
4. Update the End point property.
5. The Advanced stroke menu will stay open, allowing you to select another end point in the canvas and update the end point again.

Cap and tip endpoints

Choose from a selection of caps or tips to add to your end points:

• None: No cap or tip is added to the end of the path. The end are square, without adding any length to the path.
• Round (default): Adds a cap half the stroke weight, as well as rounding the end point of the path to 50% the width.
• Square: Adds a cap half the stroke weight, while squaring the end point of the path.
• Line arrow: Two 45-degree lines to either side of the end point(s). The line arrow uses the same stroke weight as the path itself. You cannot change the length of the arrow head lines.
• Triangle arrow: Triangle arrowhead to both end points. You'll need to enter vector edit mode → to apply an arrow to only one end of the path.
• Reverse triangle: Reversed or flipped version of the triangle arrow, with the arrow pointing inward towards the path.
• Diamond arrow: Adds a solid diamond shaped tip to the end point.

Stroke style

Use the Stroke style setting to create solid, dashed, or dotted lines.

Dashed

Create a uniform dashed line.

1. In the Stroke panel, select to open the Advanced stroke menu.
2. Select the Dashed stroke style
3. Enter the length you want for the Dash, in pixels.
4. Enter the length of the Gap between dashes, in pixels.
5. Choose the type of cap for the dash:
   • None
   • Round
   • Square

Dotted

Create a dotted line.

1. In the Stroke panel, use the dropdown to change the stroke position to Center.
2. Select to open the Advanced stroke menu.
3. Select the Dashed stroke style
4. Enter a Dash length of 1 pixel.
5. In the Dash cap setting, select Round.
6. Adjust the Gap between dashes to suit.

Custom

Create a dashed or dotted line with a custom pattern.

1. In the Stroke panel, select to open the Advanced stroke menu.
2. Set the Stroke style setting to the Custom option.
3. Use the following syntax in the Dashes setting to define the dash pattern dash, gap, dash, gap...
4. Select the Dash cap you want to use.

Join and miter angle

Define how lines join within a path or vector network. Adjust the joins in an entire path, or enter vector edit mode to select a single anchor point in the path. Choose from:

• Miter: Create a sharp point, like an arrow, where the two paths meet.
• Bevel: Cut off the sharp point to create a flat edge.
• Rounded: Round the point where two paths meet to soften to join.

Use the Miter angle setting to control the angle at which two joined lines bevel. For example: for a miter of 90°, any angle ≤ 90° will bevel, anything > 90° will create a sharp point.

Some properties are only supported on specific layer types. Use the table below to see if a specific property is supported on the layer type you’re working with.

Layer type	Paints	Position	Weight	Stroke per side	Style	Endpoint	Join
Rectangle	✓	✓	✓	✓	✓	✕	✓
Lines	✓	✓	✓	✕	✓	✓	✕
Arrows	✓	✓	✓	✕	✓	✓	✓
Ellipse	✓	✓	✓	✕	✓	✕	✓
Polygon	✓	✓	✓	✕	✓	✕	✓
Star	✓	✓	✓	✕	✓	✕	✓
Booleans	✓	✓	✓	✕	✓	✕
Vector networks	✓	✓	✓	✕	✓	Open paths only	✓
Text	✓	✓	✓	✕	✓	✕	✓
Frames (including components)	✓	✓	✓	✓	✓	✕	✓

Styles and strokes

You can only create and apply color styles to strokes. There isn't a way to save a stroke's other properties, like weight and position, as a style.

When you apply a color style to a stroke, you can still adjust the other properties. This includes the weight and distribution, as well as any advanced stroke properties like caps, join, and dashes.

Apply color styles to strokes

1. Select the layer you want to update.

2. In the Stroke section of the right-hand panel, click the Style icon.

3. Use the style picker to select the relevant color style.

4. Adjust any of the other properties of the stroke, as desired.

Scale and resize strokes

Strokes respond differently based on how you resize them.

• Resize the object if you want to retain a Stroke's weight, while adjusting the object's dimensions. Hover over the stroke's bounding box until the cursor appears, then drag to resize.
• Use the Scale tool to scale the Stroke properties along with the object's dimensions. Learn how to use the scale tool →

Strokes in the Inspect panel

Strokes show up in the Inspect panel as Borders. Some stroke properties are easy to identify by name alone. Paint is represented by border-color and style by border-style.

When it comes to weight and strokes per side, there are a few different ways we might show those values in CSS.

• When a layer has the same stroke weights on all sides, or unique values for each side, we’ll use border-width. The exact syntax will depend on the combination of values. View border-weight syntax on MDN →

  For example: a rectangle with 6px stroke on the top side, 2px on the bottom, and 4px on the left and right is represented in CSS as border-weight: 6px 4px 2px;.

  A rectangle with 6px stroke on all sides is represented as border-weight: 6px.

• When only one side of the layer has a border, we’ll use the CSS property for that specific border. For example: border-top: 1px solid fff

Convert strokes to vector objects

The Outline Stroke feature allows you to convert strokes into vector objects. This will take each path in the object and turn it into a single editable shape.

This will allow you to:

• Remove or extend half-dashes
• Create custom shapes and edit them in vector edit mode
• Combine multiple paths into a single object
• Scale vector objects uniformly

Outline stroke

1. Access the Outline Stroke feature in a few ways:
   • Right-click on the layer and select Outline Stroke
   • Go to the ☰ menu and select Vector > Outline Stroke
   • Use the keyboard shortcut:
     • Mac: Shift Command O
     • Window: Shift Ctrl O
2. Figma will convert the path into a vector object and apply any paints you had as a stroke as a fill.
3. You can see how that vector object looks in vector edit mode. Press Enter / Return, or click Edit object in the toolbar to edit the vector object.