Why do Inspect and Sketch show different position and size when an element has a border?

When you set a border for a layer in your Sketch file, the position and size of the layer do not change in your Sketch file; however, you will notice the position and size of the element in Inspect are different than what you see in Sketch.

The position and size of the layer in your Sketch file depends on the border position in Sketch. This is because with Inspect, we're translating how the borders will actually be built by the developers. See below for additional information on how position and size will differentiate.

Inside border

If the border position is set to Inside, here's what to expect in Inspect:

• Position of the element in Inspect = Position of the element in Sketch
• Size of the element in Inspect = Size of the element in Sketch

Center border

If the border position is set to Center, here's what to expect in Inspect:

• Position of the element in Inspect = Position of the element in Sketch minus half of the border thickness
• Size of the element in Inspect = Size of the element in Sketch plus the thickness of the border

Outside border

If the border position is set to Center, here's what to expect in Inspect:

• Position of the element in Inspect = Position of the element in Sketch minus border thickness
• Size of the element in Inspect = Size of the element in Sketch plus 2x the thickness of the border