How do I add rounded corners to complex shapes in CSS

Question

How can I make the corners of a complex shape rounded in CSS? Similar to how VSCode rounds the corners of selected code. I know how to make a regular rectangle rounded in CSS but how do I join the rounded corners if the rectangles touch or intersect? If necessary, using JavaScript for this is also ok (just not canvas or something like that). Here's an example of how VSCode does it:

I've researched this and have only found a lot of solutions for rectangles but nothing about non-convex or even non-rectangular shapes.

Answer 1

as pointed out in a comment, How to apply rounded borders to highlight/selection answers the problem specifically for highlighted text. For other complex shapes (like literally, any other shape) I'll just have to settle on using canvas or SVG although that wasn't really the goal.