Rounded corner background transition

How to use it

With one side, or both, of a transition between background colours/sections of the design, round the corner.

When to use it

I normally see this because the entire design is built around this style. If you're using lots of rounded corners, you might want to consider this transition between background styles. Another reason, especially if you round both corners of the transition, is that it makes each section of the website look like a card, but full width.

What to watch out for

If you're not going to use this rounded corners style heavily in your designs, this transition will look a bit odd because there's not a lot of reason for the next section to bleed into the previous section like this.

Examples

Example