border-radius

boredr-radius: border-top-left-radius | border-top-rigt-redius | border-bottom-left-radius | border-bottom-right-radius

border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px
border-radius: 0px 0px 0px / 0px 0px 0px 0px
border-radius: 0px 0px / 0px 0px 0px 0px
border-radius: 0px / 0px 0px 0px 0px
border-radius: 0px 0px 0px 0px
border-radius: 0px 0px 0px
border-radius: 0px 0px
border-radius: 0px
x축 / y축
top left / top right / bottom right / bottom left

종류 예시
border-top-left-radius 테두리 굴곡을 윗 부분 왼쪽에 설정합니다.
border-top-rigt-redius 테두리 굴곡을 윗 부분 오른쪽에 설정합니다.
border-bottom-left-radius 테두리 굴곡을 아랫 부분 왼쪽에 설정합니다.
border-bottom-right-radius 테두리 굴곡을 아랫 부분 오른쪽에 설정합니다.

Sample01

border-radius

radius1
radius2
radius3
radius4
radius5
radius6
radius7
radius8
radius9
radius10
.redius01 {border-radius: 0px;}
.redius02 {border-radius: 10px;}
.redius03 {border-radius: 20px;}
.redius04 {border-radius: 30px;}
.redius05 {border-radius: 40px;}
.redius06 {border-radius: 50px;}
.redius07 {border-radius: 60px;}
.redius08 {border-radius: 70px;}
.redius09 {border-radius: 80px;}
.redius10 {border-radius: 90px;}

Sample02

border-radius

redius11
redius12
redius13
redius14
redius15
redius16
redius17
redius18
redius19
redius20
.redius11 {border-radius: 0px 0px;} 
.redius12 {border-radius: 15px 0px;}
.redius13 {border-radius: 30px 0px;}
.redius14 {border-radius: 45px 0px;}
.redius15 {border-radius: 60px 0px;}
.redius16 {border-radius: 75px 0px;}
.redius17 {border-radius: 90px 0px;}
.redius18 {border-radius: 105px 0px;}
.redius19 {border-radius: 130px 0px;}
.redius20 {border-radius: 145px 0px;}
.redius20.active {
    animation-name: radius20;
    animation-duration: 3s;
    animation-iteration-count: 100;
}
@keyframes radius20 {
    0% {border-radius: 0px 0px;}
    25% {border-radius: 150px 0;}
    50% {border-radius: 0px 0px;}
    75% {border-radius: 0px 150px;}
    100% {border-radius: 0px 0px;}
}

Sample03

border-radius

redius21
redius22
redius23
redius24
redius25
redius26
redius27
redius28
redius29
redius30
.redius21 {border-radius: 0px / 50px;}
.redius22 {border-radius: 15px / 50px;}
.redius23 {border-radius: 35px / 50px;}
.redius24 {border-radius: 50px / 50px;}
.redius25 {border-radius: 65px / 50px;}
.redius26 {border-radius: 80px / 50px;}
.redius27 {border-radius: 95px / 50px;}
.redius28 {border-radius: 105px / 50px;}
.redius29 {border-radius: 120px / 50px;}
.redius30 {border-radius: 130px / 50px;}

Sample04

border-radius

redius31
redius32
redius33
redius34
redius35
redius36
redius37
redius38
redius39
redius40
.redius31 {border-radius: 0px 10px 10px;}
.redius32 {border-radius: 0px 30px 30px;}
.redius33 {border-radius: 0px 50px 50px;}
.redius34 {border-radius: 0px 70px 70px;}
.redius35 {border-radius: 0px 90px 90px;}
.redius36 {border-radius: 10px 10px 0px;}
.redius37 {border-radius: 30px 30px 0px;}
.redius38 {border-radius: 50px 50px 0px;}
.redius39 {border-radius: 70px 70px 0px;}
.redius40 {border-radius: 90px 90px 0px;}