Border-Radius

.block {width: 140px; height: 140px; margin: 40px;
	 text-align: center; 
	 line-height: 140px; color: #fff; float:  left;}
.block > div {transition: all 0.3s ease-in-out}
.block > div:hover {border-radius: 0;}
.border01 {border-radius: 0;}
.border02 {border-radius: 5px;}
.border03 {border-radius: 10px;}
.border04 {border-radius: 15px;}
.border05 {border-radius: 20px;}
.border06 {border-radius: 25px;}
.border07 {border-radius: 30px;}
.border08 {border-radius: 35px;}
.border09 {border-radius: 50px;}
.border10 {border-radius: 70px;}    

.border11 {border-radius: 0px 0px;}
.border12 {border-radius: 15px 0px;}
.border13 {border-radius: 30px;}
.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 {border-radius: 135px 0px;}

.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: 55px / 40px;}
.border28 {border-radius: 55px / 30px;}
.border29 {border-radius: 55px / 20px;}
.border30 {border-radius: 55px / 10px;}

.border31 {border-radius: 0px 30px 30px / 30px; }
.border32 {border-radius: 0px 40px 40px / 40px; }
.border33 {border-radius: 0px 50px 50px / 50px; }
.border34 {border-radius: 0px 60px 60px / 60px; }
.border35 {border-radius: 0px 70px 70px / 70px; }
.border36 {border-radius: 30px 30px 0px / 30px; }
.border37 {border-radius: 40px 40px 0px / 40px; }
.border38 {border-radius: 50px 50px 0px / 50px; }
.border39 {border-radius: 60px 60px 0px / 60px; }
.border40 {border-radius: 70px 70px 0px / 70px; }	

				
.border41 {border-radius: 0px 0px 30px 30px / 30px 0px 30px 30px;}
.border42 {border-radius: 0px 0px 40px 40px / 40px 0px 40px 40px;}
.border43 {border-radius: 0px 0px 50px 50px / 50px 0px 50px 50px;}
.border44 {border-radius: 0px 0px 60px 60px / 60px 0px 60px 60px;}
.border45 {border-radius: 0px 0px 70px 70px / 70px 0px 70px 70px;}
.border46 {border-radius: 30px 30px 0px 0px / 30px 30px 30px 30px;}
.border47 {border-radius: 40px 40px 0px 0px / 40px 40px 40px 40px;}
.border48 {border-radius: 50px 50px 0px 0px / 50px 50px 50px 50px;}
.border49 {border-radius: 60px 60px 0px 0px / 60px 60px 60px 60px;}
.border50 {border-radius: 70px 70px 0px 0px / 70px 70px 70px 70px;}

	
.border51 {border-radius:  0px 0px 0px 10px}
.border52 {border-radius:  0px 0px 0px 20px}
.border53 {border-radius:  0px 0px 0px 30px}
.border54 {border-radius:  0px 0px 0px 40px}
.border55 {border-radius:  0px 0px 0px 50px}
.border56 {border-radius:  0px 0px 0px 60px}
.border57 {border-radius:  0px 0px 0px 70px}
.border58 {border-radius:  0px 0px 0px 80px}
.border59 {border-radius:  0px 0px 0px 90px}
.border60 {border-radius:  0px 0px 0px 100px}

			 		
.border61 {border-radius: 50% 70% 50% 70% / 50% 50% 70% 60%;}
.border62 {border-radius: 50% 60% 50% 70% / 50% 50% 70% 60%;}
.border63 {border-radius: 50% 40% 50% 70% / 50% 50% 60% 60%;}
.border64 {border-radius: 50% 50% 70% 50% / 50% 30% 70% 60%;}
.border65 {border-radius: 50% 60% 50% 70% / 50% 60% 30% 60%;}
.border66 {border-radius: 50% 50% 70% 70% / 50% 50% 70% 60%;}
.border67 {border-radius: 50% 50% 50% 70% / 50% 80% 70% 60%;}
.border68 {border-radius: 30% 70% 50% 70% / 50% 50% 70% 65%;}
.border69 {border-radius: 70% 50% 50% 70% / 50% 40% 70% 60%;}
.border70 {border-radius: 50% 50% 50% 70% / 50% 30% 70% 60%;}

Border-Radius 참고

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

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

See the Pen Border-Radius Playground by Adam Kuhn (@cobra_winfrey) on CodePen.

Border-Radius animation

See the Pen border-radius Morphing by jeongahlee (@jeongahlee) on CodePen.