uiowa / uids

UI Design System
http://uids.brand.uiowa.edu
7 stars 1 forks source link

Switch to `outline` instead of `border` property on card component #882

Open bspeare opened 1 year ago

bspeare commented 1 year ago

As a user of the card component, I can set a grid of cards without the borders creating an overlapping line.

Before: border: 1px solid rgba(0,0,0,.125)

Screenshot 2023-06-15 at 4 04 33 PM

After: outline: 1px solid rgba(0,0,0,.125)

Screenshot 2023-06-15 at 4 04 26 PM

There might be some box-model downsides to this that would need to be tested out: https://web.dev/learn/css/box-model/.

This method might be useful as well: https://tailwindcss.com/docs/divide-width.