Animated Border Radius

This is an example of animating a CSS border radius using just CSS. Turns out it looks like a moving organ!

by Colin Soderstrom

HTML

<div class="animatedBorders"></div>

CSS

.animatedBorders {
  width: 40%;
  height: 300px;
  margin: auto;
  background: #ff0000; /* Old browsers */
  background: -moz-linear-gradient(top, #ff0000 0%, #9e1f1f 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ff0000 0%,#9e1f1f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ff0000 0%,#9e1f1f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#9e1f1f',GradientType=0 ); /* IE6-9 */
  border-radius: 40% 30% 60% 40% / 30% 30% 70% 70%;
  -webkit-animation: amoeba 5s infinite; /* Safari 4.0 - 8.0 */
  animation: amoeba 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes amoeba {
    50% {border-radius: 20% 70% 50% 50% / 40% 40% 60% 80%;}
}

@keyframes amoeba {
    50% {border-radius: 20% 70% 50% 50% / 40% 40% 60% 80%;}
}