Thread by @PixelJanitor

A 🧵 on how to implement beautiful shadow borders:

Yesterday, @jamesm called out our @trycampsite UI bits and how we utilize box shadows as borders to get better border contrast on elements with shadows. Lets talk about how we actually implement this and work around the gotchas:

To recap - use a 1px slightly transparent box shadow as a border instead of a traditional css border on elements with shadows to get a gradient border on the element for free. The box shadow blends with the element's shadow as it gets darker towards the bottom. Why not borders?

These days devs use the css magic of box-sizing: border-box for all elements. This makes elements include their padding and borders inside of their element size. Shadows render outside of this boundary. But outside shadows as borders will create size and alignment issues like...

Here's a container with just a border above a button using a shadow border. Because of the shadow being on the outside, it causes the alignment to appear 1px off. The browser is aligning as is should since the container's outsides are aligned. Let's talk size issues too...

Your design system says form items should be 48px tall. You have a shadow'ed button next to a input with a border. Since you're using shadows as borders, the button element actually appears as 50px tall now because of the borders on the outside. Taller than your input. The fix?

Elements with borders can utilize background-clip: padding-box to prevent the background from showing under the border. This allows the border to blend on top of the shadows as long as your shadows have a negative value of spread equal to the border width so that they overlap.

Now you're able to use borders like normal and get the nice gradient effect box-shadow borders create since the background now ends at the border start. The border renders inside the element boundaries so that sizing is correct. More detail on how we style buttons at Campsite...

Here's Campsite's dark mode buttons. Light perception is key to beautiful borders and shadows. It involves many small details, but put together, can result in some really nice UI. Lastly, some real world code for ya to play with...

Here's @jamesm example input element design from his thread involving the stuff I just talked about - built with @tailwindcss. Dark mode elements let us get even fancier (noticed the focus glow impacting the outer highlights when active). codepen.io/DerekBriggs/pe…

Users don't see your Figma design files, so they're only as good as their implementations. Sweat the details in the code too.

I hope this helps with polishing the contrast borders in your UI 🤙