Is it better to use Inside or Outside strokes?

I’m also interested to hear how people decide inside vs outside.

our team uses internal strokes for the same reason you mentioned: ensuring spacing isn’t influenced by a stroke.

CSS can be written this way too, so no need to compromise! Looks like developers could use the box-shadow property with inset preceding the pixel values of the shadow. An alternative would be using the outline property paired with outline-offset using a negative value.

You can see a live example of this on w3docs.

Hmm… So your team decided to go against a W3 standard and add more work for developers. I thought less code is better code.

Hey Guy, thanks for the critique, I think you’ve got a great point.

How does your team handle borders in Figma? I’d appreciate learning about your implementation.

Well, we used borders but they are problematic. So, like every other team we have asked, it’s a HUGE issue. Long story short, it’s a mess of borders, inside, outside, etc. We’re not the only team to have this issue. But we have made the decision moving forward to use box-shadow. It’s just not even close to ideal.

ah yeah, I get that. It’s aggravating to feel like you’re settling for something that feels brittle or more complicated than it ought to be.

Even though it’s not ideal, it’s helpful to know where you’ve landed, so thanks for that 🙏 I think others will be glad for the perspective too.

They implement Dev Mode, but ignore this mismatch that is increasing the dev-Figma relationship and also the designers work just so much…

I’m running into the same thing with my dev team, especially with the promise of Code-Connect falling flat in the face of something as simple as a border…

My team is going to try doing stroke-inside in Figma, while the devs use box-sizing: border-box. Hope if works out. Has anyone else tried this? It seeeeems to be a good way to get around the issue of borders taking up space.

We wanted to use shadows at first, but the dual axis of widthxcolor made it a terrible idea to create SO MANY shadow styles just to mimic the borders.