border-radius

border-radius

.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; animation: border10 2.5s infinite ease; }

border-radius

.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 { border-radius: 135px 0px; animation: border20 2.5s infinite ease-in-out; }

border-radius

.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; }

border-radius

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

border-radius

.border41 { border-radius: 0px 0px 30px 30px / 0px 0px 30px 30px; }
.border42 { border-radius: 0px 0px 40px 40px / 0px 0px 40px 40px; }
.border43 { border-radius: 0px 0px 50px 50px / 0px 0px 50px 50px; }
.border44 { border-radius: 0px 0px 60px 60px / 0px 0px 60px 60px; }
.border45 { border-radius: 0px 0px 70px 70px / 0px 0px 70px 70px; animation: border45 2.5s infinite ease-in; }
.border46 { border-radius: 30px 30px 0px 0px / 30px 0px 0px 0px; }
.border47 { border-radius: 40px 40px 0px 0px / 40px 40px 0px 0px; }
.border48 { border-radius: 50px 50px 0px 0px / 50px 50px 0px 0px; }
.border49 { border-radius: 60px 60px 0px 0px / 60px 60px 0px 0px; }
.border50 { border-radius: 70px 70px 0px 0px / 70px 70px 0px 0px; animation: border50 2.5s infinite ease-in; }
@keyframes border45 {
0% { border-radius: 0px 0px 70px 70px / 0px 0px 70px 70px; }
50% { border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px; }
100% { border-radius: 0px 0px 70px 70px / 0px 0px 70px 70px; }
}
@keyframes border50 {
0% { border-radius: 70px 70px 0px 0px / 70px 70px 0px 0px; }
50% { border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px; }
100% { border-radius: 70px 70px 0px 0px / 70px 70px 0px 0px; }
}

border-radius

.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; }

border-radius

.border61 { border-radius: 50% 70% 55% 65% / 50% 45% 60% 30%; }
.border62 { border-radius: 40% 40% 55% 75% / 30% 45% 60% 75%; }
.border63 { border-radius: 55% 50% 55% 85% / 50% 25% 60% 40%; }
.border64 { border-radius: 55% 60% 55% 90% / 60% 45% 60% 45%; }
.border65 { border-radius: 60% 70% 55% 20% / 80% 60% 60% 85%; }
.border66 { border-radius: 65% 80% 55% 35% / 30% 45% 60% 45%; }
.border67 { border-radius: 70% 90% 55% 55% / 70% 45% 60% 25%; }
.border68 { border-radius: 75% 30% 55% 40% / 55% 70% 60% 45%; }
.border69 { border-radius: 80% 20% 55% 60% / 20% 30% 60% 10%; }
.border70 { border-radius: 90% 10% 55% 45% / 90% 45% 60% 50%; }

border-radius

See the Pen Border-radius Morphing by hyunji (@hyunjizzang) on CodePen.

See the Pen Border radius by Pogany (@giaco) on CodePen.

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