Fixing Border Of An Element

Hello Guys! This is a css animation that I made. https://codepen.io/SsadiqRoy/pen/YzdGPJN In this, there is an element who has the it border-style: dashed;. but there seem to be some thin lines underneath and above the border which I can't figure out how they are there and how to remove them. I would also like to connect each outer avatar to the central one. If anyone knows how I could make that happen, please help. Thanks.
2 Replies
capt_uhu
capt_uhu16mo ago
Those extra thin lines you're seeing are from the way browsers anti-aliasing. It a long standing consistent "bug" between browsers and unfortunately there's not much you can do but work around it. You might have some luck making the inner elements border-radius smaller the the outer elements. https://codepen.io/jsnkuhn/pen/gOZwpPe?editors=1100
capt_uhu
capt_uhu16mo ago
another way to get the dashed effect your looking for might be to use a repeating-conic-gradient() mask on the element with the linear-gradient() background
Want results from more Discord servers?
Add your server