Published on
Borders and Gradients preview

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.

See the Pen Borders & Gradients by Ivan Bogachev (@sfi0zy) on CodePen.

Related posts

Pet projects

Muilessium preview

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.

Promo Core preview

Boilerplate for static promotional websites. Pug, LESS, PostCSS, ES6+, Gulp, Webpack, BrowserSync, ESLint, Stylelint, auto-generated docs...

Shaders Gallery preview

Library for creating galleries of photos with effects based on WebGL shaders.