Think you know Sketch? — Let’s bust some myths!

Learn more

Think you know Sketch? — Let’s bust some myths! Learn more

Skip Navigation
Documentation Symbols and Styles Styling Borders

Borders

Last updated on 21 Apr 2021
1 min read

You can add as many borders as you like to your layers, with different thicknesses, colors and blend modes.

Borders

Watch lesson

Borders can be a solid color Oval, or have a linear Linear Gradient, radial Radial Gradient or angular gradient Angular Gradient fill.

Tip: You can quickly show or hide borders on any layer by pressing B.

Setting a border position

For closed shapes, you can place borders on the inside Border position Inside, outside Border position Outside or center Border position Center of its outline. For open paths, the only option is center.

Border options (left to right): Inside, Center, Outside.

Customizing borders

Click the settings icon Adjust properties next to the Borders title to bring up options for caps, ends, arrows and dashed borders:

An annotated image showing the different border options
  1. For line layers and open paths, you can choose from three types of border end: Butt cap Butt cap (Draws the border right to the vector point), Round cap Round cap: (Creates a rounded, semi-circular end to a path that extends past the vector point) or Projecting cap Projecting cap (Similar to the rounded cap, but with a straight edges).
  2. For open and closed paths with three or more points (creating corners) you can choose from three types of join: Miter join Miter join: (Creates an angled join), Round join Round join: (Creates a rounded corner for the border with a radius relative to the border thickness) or Bevel join Bevel join (Creates a chamfered edge on the border corner).
  3. For line layers, you can choose arrowheads for the start and end of the path using the drop-down menus. To switch which ends they appear on, choose Layer > Path > Reverse Order.
  4. To create dashed lines, enter a value in the Dash field to set the length of the dashes. The Gap field, which sets the distance between dashes will automatically match this unless you set it to something different. To reset the the Gap value and have it match again, delete anything in that field.

Tip: To create a dotted line, set the end type to a round cap Round cap, then set the dash value to 0. Adjusting the gap distance will change the look of your dotted border.