Can you explain why you choose one over the other? My first thought is inside to follow your own grid and spacing rules perfectly, but when it goes into development, borders are generated outside of the element, right? So should your designs be created in anticipation of that?
2 Likes
I’m also interested to hear how people decide inside vs outside.
1 Like
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.
1 Like
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.