Dashed stroke incompatible with stroke inside/outside?

Hi ​@Julia57, thanks for reaching out about this! 

I completely understand why this discovery would be confusing, but please note that the width-doubling behavior you're seeing with dashed strokes at inside/outside alignment is actually expected behavior due to how dashed stokes were developed. Figma renders strokes under the hood: inside/outside strokes are drawn as a double-width centered stroke and then masked to show just one side. This is why the dash pattern (and caps) can look different once you move off "centered." Solid strokes don't show this because there's no dash pattern to interact with the masking.
 

Hope this helps explain! 

​@djv So the dash pattern interferes with the masking? I would say that sounds like a bug, and not like expected behavior. I expect the dashed lines to be masked using the same mask as the solid one. 

Does this reflect how strokes are rendered in CSS? I don’t want to cheat the optics by adjusting figma values, only to have my devs inspect the wrong values.

Hey ​@Julia57 — Tom here, stepping in for ​@djv today.

Building on her explanation: The width you're seeing double on canvas is a rendering effect of how inside/outside strokes are drawn (double-width, then masked), not a change to the underlying value. I see what you mean from your screenshot, though, and I'm aware of other conversations about this issue internally.

On your CSS question, you shouldn't need to change values. Your 4px weight stays 4px; Dev Mode reads the weight and position separately, so your dev team shouldn't inspect a doubled number. The one thing worth flagging to them is that Figma's stroke alignment doesn't map 1:1 to CSS (there's no "inside/outside" on a CSS border), so the position is more of a design-side concept than a value they'll read directly. For more on this, have a look at this article: Apply and adjust stroke properties.

So that I can go deeper with the product team, can you confirm what the handoff looks like on your end — are your devs reading values in Dev Mode, or exporting the assets? That'll help me illustrate the right workflow.

​@Tom Reem Thanks Tom. My devs will be reading the values, but they will be confused that it looks wildly different in the Figma Handoff and I will have to add notes every time trying to explain the situation. This is problematic because Figma’s role is to express the visual intention of the designers, and if the devs have to second-guess what they are seeing visually, it’s not a very good handoff 😅. I hope the team finds a fix for it somehow.

That definitely looks like a bug to me. If the solid strokes respect the alignment but the dashed ones don't,, it doesn't seem like user error. Curious to see if others can reproduce it or if the team can confirm it's a known issue.

Hey ​@Julia57 and ​@Ide idrees — thanks for coming back and explaining why this matters. I can definitely see how this visual mismatch could create confusion in the handoff to your dev team.

Would you be willing to share a file where you've demonstrated this? I actually tried to reproduce it on my end and wasn't able to (screenshot from my attempt below), so getting a full view of your stroke settings would help a lot — in particular the exact dash and gap values alongside the 4px weight and inside/outside alignment.

If you could reply with the file URL and share view access to support-share@figma.com, that’ll help our team review further. I'll keep an eye out for your reply and follow up as soon as I have more to share. 🙏🏻