0

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:

example screenshot

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

douira
  • 506
  • 1
  • 6
  • 22
  • I have done research on this and I have not found anything of use. Maybe I should have explained that in order to not get penalized? – douira Jan 24 '20 at 23:10
  • You might want to explain what you mean by "complex shape". An SVG? A shape drawn on a canvas? what is "complex shape"? – 2pha Jan 24 '20 at 23:16
  • Well, complex shapes are not exactly the same thing as highlighted text. If you did the research that you claim, you would have seen this about highlighted text: https://stackoverflow.com/questions/24985529/how-to-apply-rounded-borders-to-highlight-selection – Decipher Me Please Jan 24 '20 at 23:21

1 Answers1

0

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.

douira
  • 506
  • 1
  • 6
  • 22