Ivan Bogachev

Creative frontend developer



Borders and Gradients

Borders and Gradients

The development of custom borders for the 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 borders for one of my answers on Habr Q&A.

The Pen by Ivan Bogachev (@sfi0zy).