Using CSS to animate border-radius

My personal site, as with many, is a safe place to try out interesting ideas that most clients are reluctant to sign up for. While many of my experiments are engineering related, I do have a couple gems embedded in my CSS.

I added this effect to my footer a few months back and wanted to jot down the details because it has really grown on me and I don't see it very often in the wild.

Creating irregular shapes

The feature of border-radius that we're exploiting is the second value you can pass in. Typically when we set the radius we just pass one value and it automatically copies the value for us:

/*
 * Standard, evenly-rounded corners.
 */
.single-value {
  border-radius: 50px; /* 50px / 50px */
}

/*
 * The rounding will be 2x wider than it is tall.
 */
.double-value-wide {
  border-radius: 50px / 25px;
}

/*
 * The rounding will be 2x taller than it is wide.
 */
.double-value-tall {
  border-radius: 25px / 50px;
}

Example 1, which uses the same CSS as the first example code block.

You can see that when a second value is supplied, the first value is the horizontal radius and the second is vertical.

This is where things start getting interesting. I saw a great demo from Tiffany Rayside a few months back which uses this effect to its fullest, creating organic looking borders just by pairing large and small radii together. Here is her CodePen:

See the Pen Imperfect Buttons by Tiffany Rayside (@tmrDevelops) on CodePen.

Combine this technique with the right typeface and you can really pull off the hand-drawn vibe. But what else can you do?

Animating border-radius

I was trying to make my footer more personable and included my headshot, as one does. But how can I make it more interesting? I experimented with a few different radius combos but nothing was totally satisfying. Then I decided to try animating between a few states. Now that is something!

.avatar-wobble {
  border-radius: 250px 750px 250px 750px /
                 750px 250px 750px 250px;
  animation: wobble 15s ease-in-out alternate infinite;
}

@keyframes wobble {
  50% {
    border-radius: 750px 550px 350px 750px /
                   350px 750px 550px 450px;
  }
  100% {
    border-radius: 750px 250px 750px 250px /
                   250px 750px 250px 750px;
  }
}

my face

Using animation-direction: alternate means the animation runs forwards then backwards, making it look a bit more random. The 100% marker is the inverse of the initial starting point, and using ease-in-out as my timing function means it will briefly appear to pause at the two ends of the animation where it's more regular looking. But the middle chunk is pretty wobbly and creates a nice, subtle effect if you end up finding yourself unable to escape my gaze.

Unlike Tiffany's button effect, I stuck with high numbers to avoid creating any sharp corners. I wanted my avatar to be a nebulous blob at all times.

I originally triggered the effect on :hover with a short transition time, but mobile users were missing out on the fun. By using an animation with a long duration we get a continuous effect that is just slow enough to make you question whether you're seeing things until you pause to watch.

Bingo.

Adding even more randomness

I recently read about the Cicada principle which which uses :nth-child and prime numbers to simulate randomness on large groups of elements.

This principle was used on the 2016 UX London speakers page to accomplish this exact effect: irregular border radius settings applied semi-randomly to the various avatars. The designer even randomized the :hover state, meaning a wall of 20+ avatars has seemingly no duplicate effects applied to any of them. You could sit there and eventually find a pattern, but at a quick glance both the initial and hover states appear to be random.

Hopefully the simplicity of this technique unlocks other possibilities in your mind. If you have other examples please drop them in the comments!

Prev Blog Next