Border-radius

.block {width: 140px; height: 140px; margin: 40px; text-align: center; line-height: 140px; color: #fff; float: left;}
.block > div {transition: all 0.34s ease-in-out;}
.block > div:hover {border-radius: 0;}

.block.bor1 > div {background-image: linear-gradient(to top, #92fe9d 0%, #00c9ff 100%);}
.border1 {border-radius: 0px;}
.border2 {border-radius: 5px;}
.border3 {border-radius: 10px;}
.border4 {border-radius: 15px;}
.border5 {border-radius: 20px;}
.border6 {border-radius: 25px;}
.border7 {border-radius: 30px;}
.border8 {border-radius: 35px;}
.border9 {border-radius: 50px;}
.border10 {border-radius: 70px;}

.block.bor2 > div {background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);}
.border11 {border-radius: 0px 0px;}
.border12 {border-radius: 15px 0px;}
.border13 {border-radius: 30px 0px;}
.border14 {border-radius: 45px 0px;}
.border15 {border-radius: 60px 0px;}
.border16 {border-radius: 75px 0px;}
.border17 {border-radius: 90px 0px;}
.border18 {border-radius: 105px 0px;}
.border19 {border-radius: 120px 0px;}
.border20 {
	animation: border20 1s ease-in-out 100;
/* 	animation-name: border20;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 100; */    
}

@keyframes border20 {
	0% {border-radius: 0px 0px;}
	50% {border-radius: 135px 0px;}
	100% {border-radius: 0px 0px;}
}

.block.bor3 > div {background-image: linear-gradient(to top, #92fe9d 0%, #00c9ff 100%);}
.border21 {border-radius: 10px / 55px;}
.border22 {border-radius: 20px / 55px;}
.border23 {border-radius: 30px / 55px;}
.border24 {border-radius: 40px / 55px;}
.border25 {border-radius: 50px / 55px;}
.border26 {border-radius: 55px / 50px;}
.border27 {border-radius: 50px / 40px;}
.border28 {border-radius: 55px / 30px;}
.border29 {border-radius: 50px / 20px;}
.border30 {border-radius: 50px / 10px;}

.block.bor4 > div {background-image: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);}
.border31 {border-radius: 0px 0px 0px 10px;}
.border32 {border-radius: 0px 0px 0px 20px;}
.border33 {border-radius: 0px 0px 0px 30px;}
.border34 {border-radius: 0px 0px 0px 40px;}
.border35 {border-radius: 0px 0px 0px 50px;}
.border36 {border-radius: 0px 0px 0px 60px;}
.border37 {border-radius: 0px 0px 0px 80px;}
.border38 {border-radius: 0px 0px 0px 100px;}
.border39 {border-radius: 0px 0px 0px 120px;}
.border40 {border-radius: 0px 0px 0px 140px;}

.block.bor5 > div {background-image: linear-gradient(to top, #dcb0ed 0%, #99c99c 100%);}
.border41 {border-radius: 50% 50% 50% 70% / 50% 50% 70% 60%;}
.border42 {border-radius: 40% 40% 50% 40% / 30% 50% 50% 50%;}
.border43 {border-radius: 100% 0 0 100% / 50%;}
.border44 {border-radius: 50% 50% 0 0 / 50% 50% 0 0;}
.border45 {border-radius: 80% 30% 30% 80% / 80% 100% 100% 80%;}
.border46 {border-radius: 50% 60% 20% 10% / 30% 80% 10% 80%;}
.border47 {border-radius: 100% 80% 100% 80% / 80% 100% 80% 100%;}
.border48 {border-radius: 50% 0 100% 20% / 50% 100% 0 20%;}
.border49 {border-radius: 30% 10% 40% 90% / 60% 10% 50% 30%;}
.border50 {
	animation-name: border50;
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;  
}
@keyframes border50 {
	0%   {border-radius: 0px; background-color: #f44336 ;}
	10% {border-radius: 0px 0px 0px 0px;  background-color: #ff9800  ;}
	20% {border-radius: 0px 50px 0px 0px;  background-color: #ffff00  ;}
	30% {border-radius: 0px 0px 50px 0px;  background-color: #00e676  ;}
	40% {border-radius: 0px 0px 0px 50px;  background-color: #0d47a1  ;}
	50% {border-radius: 0px; background-color: #311b92 ; transform: rotate(720deg) translatex(100px);
		box-shadow: 0 0 15px 0 rgba(0,0,0,0.8) inset;}
	60% {border-radius: 50% 10% 50% 10% / 50% 10% 50% 10%; background-color: #0d47a1 ;}
	70% {border-radius: 60% 50% 60% 50% / 50% 60% 50% 60%; background-color: #00e676 ;}
	80% {border-radius: 80% 100% 80% 100% / 10% 30% 10% 30%; background-color: #ffff00 ;}
	90% {border-radius: 10% 80% 10% 80% / 80% 10% 80% 10%; background-color: #ff9800 ;}
	100% {border-radius: 0px; background-color: #3e2723  ;}
}

Border-Radius Generator

See the Pen CSS Border-Radius Generator by Peter Klein (@pmk) on CodePen.

Border-radius learning tool

See the Pen border-radius learning tool by Lavi Perchik (@laviperchik) on CodePen.