Border radius that spans over several elements?
So I want to create this border effects where the radius is sort of inverted... I tried using ::after elements and flipping one of them but... yea it's not really working out as the border isn't really aligning properly, and the corners have some weird artifacts. How would you approach this?
My codepen for reference
https://codepen.io/markus-bergman/pen/PovoBdW
8 Replies
there are different approaches,
i used an after element that is slightly larger (half the border size) than the element. that way they overlap.
then with a mask i cut of the bottom or top border
https://codepen.io/MarkBoots/pen/eYaYjox
Thanks @MarkBoots , the preview looks solid! However I can only see this:
refresh. i did a slight change
It has artifacts when zooming out, is it the same for you?
100% works
90% doesn't
70% works
yea, that could be rounding issues. (half pixels).
hard to do something about that
ah... yea hm
I tried a similar solution to Marks but, rather than using a mask, I adjusted the inset values. However, it made little difference to the zooming issue (nor is there any reason why it should).
I'll post it here anyway in case you want an slightly alternative approach.
https://codepen.io/cbolson/pen/eYaYLbN
yea also tried it with box-shadows, but same thing, when zooming the rounding is off
will try it later with border-images or bg clipping, but don't have high hopes