border-radius
border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius
border-radius: 5px 6px 7px 8px;
= border-top-left-radius : 5px;
= border-top-right-radius : 6px;
= border-bottom-right-radius : 7px;
= border-bottom-left-radius : 8px;
border-radius: 5px 6px 7px;
= border-top-left-radius : 5px;
= border-top-right-radius : 6px;
= border-bottom-right-radius : 7px;
= border-bottom-left-radius : 6px;
border-radius: 5px 6px;
= border-top-left-radius : 5px;
= border-top-right-radius : 6px;
= border-bottom-right-radius : 5px;
= border-bottom-left-radius : 6px;
= border-top-left-radius : 5px;
= border-top-right-radius : 6px;
= border-bottom-right-radius : 7px;
= border-bottom-left-radius : 8px;
border-radius: 5px 6px 7px;
= border-top-left-radius : 5px;
= border-top-right-radius : 6px;
= border-bottom-right-radius : 7px;
= border-bottom-left-radius : 6px;
border-radius: 5px 6px;
= border-top-left-radius : 5px;
= border-top-right-radius : 6px;
= border-bottom-right-radius : 5px;
= border-bottom-left-radius : 6px;
border01
border02
border03
border04
border05
border06
border07
border08
border09
border10
.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;}
border11
border12
border13
border14
border15
border16
border17
border18
border19
border20
.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; }
}
border21
border22
border23
border24
border25
border26
border27
border28
border29
border30
.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
border32
border33
border34
border35
border36
border37
border38
border39
border40
.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;}
border41
border42
border43
border44
border45
border46
border47
border48
border49
border50
border-radius
See the Pen border-radius learning tool by Lavi Perchik (@laviperchik) on CodePen.
border-radius
See the Pen CSS Border-Radius Generator by Peter Klein (@pmk) on CodePen.