Published on
Border for custom element preview

I like to work with creative designers. I like to convert their ideas to HTML and CSS. I think that every professional front-end developer must be able to do it. It’s our job after all. But I look at questions on Habr Q&A and I see people asking about these designs almost every day. I expect to see beginners, the programmers with a year of experience, but I don’t expect these questions from the seniors. But they are there. And a lot of comments like “it’s impossible to create this thing, you should just fire your designer”. I think I’ll write a big article with lifehacks for such tasks in the future, but not now. This time I created just the one example of the responsive custom border. It looks simple, but it’s not. You’ll find the SVG filter for creating a border with padding for the shape of free form in the sources.

See the Pen Border for custom element by Ivan Bogachev (@sfi0zy) on CodePen.

Related posts

1000 answers - post preview
Funny face - post preview
Five CSS tricks - post preview

Pet projects

Math slides
38  1 

The tool from my series of articles called "Math is not required for UI development". It creates slides with graphs and texts in the style of the school desk.

Promo Core preview
10  1 

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

Muilessium preview
16  3 

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