How to cross-browser make a beveled corner on divs with interactive borders?

Question

css

There is a product card layout:

card

You need to make it cross-browser at least under ie11. Accordingly, clip-path disappears, because no support in ie&edge ( https://caniuse.com/#search=clip-path)
I did this: https://codepen.io/evileyes/pen/JpzaZZ
But I have a feeling that this is some kind of crutch ( the thickness of the bevelled border is clearly different).
How can it be done more gracefully and more beautifully?

Answer 1

I understand that I do not answer your request, but it seems to me that this is either crutches or a background image.
Maybe an svg background would be easier to do?