How to create straight corners with CSS border-radius? [duplicate]

Question

I am trying to create this kind of straight corner with the CSS border-radius property:

But so far I am only getting the basic CSS rounded corners. Does anyone have a solution for this? I am trying not to use an image to create the effect.

Thanks in advance.

Answer 1

Well, border-radius will always create a rounded edge (or have you ever seen a polygon with a radius?). I would create a scalable SVG image with the border (and transparency in the middle, in order to let you switch the background color in your CSS) and use it as the background of the box.