Super Borders Tutorial on Angular and Non-Standard Borders — Part 2

Web design trends of recent continue to push the boundaries on the status quo of rectangular layouts.

One way this manifests is in the border between two sections of a webpage. Often the borders are angled, sometimes curved, but visually interesting for sure.

In this post we’ll look at one way to approach the section border.

Create a swooshing section border with background image property. provides insight and inspiration.

swoosh background

How to do it:

background-image: url(site-assets/cover_silver_flip_dark.jpg);
background-size: cover;
background-position: right top;

use an image like the one they’ve used

Leave a comment

Your email address will not be published. Required fields are marked *