Created on November 2, 2022 at 11:34 pm
Why we use the CSS property box-shadow instead of border in our app
If you inspect the html and CSS of the threads.com site, you might notice something peculiar. On a div with a border, you'd expect to see the CSS property
border, but instead, you'll see
Why is that?
Figma vs. the browser
Our design system works on a 4px grid, which means our spacing—margins and padding—is a multiple of 4.
However, we noticed something kept breaking the grid. Designs would look great in Figma, but they'd be a few pixels off in the browser.
What we found was there's an inconsistency between Figma and browsers when it comes to spacing around borders:
What does that mean?
For example, suppose we want to create a box with the following specifications:
border: 1px solid black
margin-right: 8px # orange
How it looks in Figma
How it looks in the browser
What problems does this cause?
Designers work in Figma, and Engineers work in the browser. This discrepancy creates friction between engineering and design, and makes it difficult to maintain consistency across the product. This creates issues such as:
What options did we consider to reconcile the differences?
Engineering adapts to the design system
With this solution, we would create a system where engineers understand this discrepancy and know how to update the spacing based off the Figma file. For example, they'd write the CSS:
border: 1px solid black
# If there were padding, we'd implement it as (figmaPadding - borderWidth)
# For example if Figma has padding of 8 and 1px border - we write `padding: 7px` to account for the border taking space
We could create helper components and functions that make this easier to do this such as creating a
divwrapper that transforms the spacing input based on whether a border has been defined. However, this would cause a discrepancy between the code and inspector, which makes it difficult to debug UI related bugs.
Design and Engineering both use box-shadow instead of border
Borders in Figma act just like box-shadows in browsers. In this solution, both systems would stop using borders completely and only use box-shadows to represent them. For example
border: 1px solid blackis equivalent to
box-shadow: 0px 0px 0px 1px black.
Using box-shadow gives an effect of a border while taking up no space, which lets the remaining element attributes work as expected. Even though
box-shadoware basically the same thing in Figma, Design would only use
box-shadowto ensure consistency between the team and to ensure we have a common language between design and engineering.
What approach did we take?
We decided to go with Option
. Design and Engineering use
box-shadowinstead of border in both Figma and the browser.
With this approach, engineers can copy the css properties directly from Figma instead of needing to know how to convert a
As a result, when we polish a section of the frontend, it's much easier to make our designs pixel perfect.
Design and Engineering speak a common language, and we all move faster together.
If you have any questions about using the box-shadow instead of border or other similar topics, feel free to drop me a line at email@example.com!
©2022 Threads, Inc.