consider rounded corners on link focus

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.

https://open-props.style

MIT License

4.78k stars 193 forks source link

Open argyleink opened 1 year ago

argyleink commented 1 year ago

border-radius: var(--radius-round); on links

hchiam commented 1 year ago

2 rough ideas: https://codepen.io/hchiam/pen/QWJmmrB?editors=0100 (i was testing in Firefox - i just noticed idea 1 in this demo ends up rounding every line's corners in Chrome)

argyleink commented 1 year ago

rad and helpful demo! ❤️

i played around with it for long enough to create a fork https://codepen.io/argyleink/pen/MWzGGxa and added an option 3.

side note: all the blobby merging effects are kinda sweet. i bet there's a way to abuse that for a fun demo

seems pretty viable, your thoughts?

hchiam commented 1 year ago

that looks pretty cool in Chrome!

unfortunately, Firefox is displaying all the demos differently for me:

idea 2 is the most similar between those 2 browsers, but even idea 2 has side borders in Chrome

but no side borders in Firefox

we'll have to dig further to find something satisfying cross-browser

btw i tested on Chrome 114 and Firefox 115