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
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=1100another 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