All Tips

Consistent Border-Radius
Consistent Border-Radius

Consistent Border-Radius

visual effect

Round images usually look weird when they're included in a card with a small border-radius.

Use the simple rule of thumb:

π™Šπ™ͺπ™©π™šπ™§ π™π™–π™™π™žπ™ͺ𝙨 = 2 * π™„π™£π™£π™šπ™§ π™π™–π™™π™žπ™ͺ𝙨

  • The precise formula is more complicated since you need to take into account the spacing between the two borders, so let's it simple!
←Previous Tip

Fallback for Transparent Avatars 2

Another visual hack to ensure consistency for transparent avatars is by adding a subtle border around them, the same color as the background. The border looks like it's part of the background and distinguishes it from the cover section.

visual effect

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract

  • Logo

    Learn to design better User Interfaces with practical UI & UX tips

  • Projects



    PH Launch Checklist

  • Popular Posts

    15 Practical UI Form Tips

Β©2023 . Made by Jim Raptis