The development of custom borders for HTML elements always was a nightmare for junior developers. The main thing is that such elements usually must be responsive, their sizes must depend on the content inside. The old-school solution with an image in the background of the element is not responsive. It works sometimes, but not always. In more complicated cases we have two opinions: use border images or draw everything with CSS gradients. I like the second one. I use it in most cases because usually the borders in my designs are not so complex. I don’t see any reason to create a lot of images for them. Anyway, I created a cute example of such border to use it in my answer to this question.