border-radius
border-radius: border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius;
border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px;
X축 / Y축
top left / top right / bottom right / bottom left
| 종류 | 예시 |
|---|---|
| border-top-left-radius | 테두리 굴곡을 윗 부분 왼쪽에 설정합니다. |
| border-top-right-radius | 테두리 굴곡을 윗 부분 오른쪽에 설정합니다. |
| border-bottom-left-radius | 테두리 굴곡을 아래 부분 왼쪽에 설정합니다. |
| border-bottom-right-radius | 테두리 굴곡을 아래 부분 오른쪽에 설정합니다. |
Sample01
border-radius
radius1
radius2
radius3
radius4
radius5
radius6
radius7
radius8
radius9
radius10
.radius01 {border-radius: 0px;}
.radius02 {border-radius: 10px;}
.radius03 {border-radius: 20px;}
.radius04 {border-radius: 30px;}
.radius05 {border-radius: 40px;}
.radius06 {border-radius: 50px;}
.radius07 {border-radius: 60px;}
.radius08 {border-radius: 70px;}
.radius09 {border-radius: 80px;}
.radius10 {border-radius: 90px;}
Sample02
border-radius
radius11
radius12
radius13
radius14
radius15
radius16
radius17
radius18
radius19
radius20
.radius11 {border-radius: 0px 0px;}
.radius12 {border-radius: 15px 0px;}
.radius13 {border-radius: 30px 0px;}
.radius14 {border-radius: 45px 0px;}
.radius15 {border-radius: 60px 0px;}
.radius16 {border-radius: 75px 0px;}
.radius17 {border-radius: 90px 0px;}
.radius18 {border-radius: 105px 0px;}
.radius19 {border-radius: 120px 0px;}
.radius20 {border-radius: 135px 0px;}
.radius20.active {
animation-name: radius20;
animation-duration: 3s;
animation-iteration-count: 100;
}
@keyframes radius20 {
0% {border-radius: 0px 0px;}
25% {border-radius: 150px 0px;}
50% {border-radius: 0px 0px;}
75% {border-radius: 0px 150px;}
100% {border-radius: 0px 0px;}
}
Sample03
border-radius
radius21
radius22
radius23
radius24
radius25
radius26
radius27
radius28
radius29
radius30
.radius21 {border-radius: 0px / 50px;}
.radius22 {border-radius: 15px / 50px;}
.radius23 {border-radius: 35px / 50px;}
.radius24 {border-radius: 50px / 50px;}
.radius25 {border-radius: 65px / 50px;}
.radius26 {border-radius: 80px / 50px;}
.radius27 {border-radius: 95px / 50px;}
.radius28 {border-radius: 105px / 50px;}
.radius29 {border-radius: 120px / 50px;}
.radius30 {border-radius: 135px / 50px;}
Sample04
border-radius
radius31
radius32
radius33
radius34
radius35
radius36
radius37
radius38
radius39
radius40
.radius31 {border-radius: 0 10px 10px;}
.radius32 {border-radius: 0 30px 30px;}
.radius33 {border-radius: 0 50px 50px;}
.radius34 {border-radius: 0 70px 70px;}
.radius35 {border-radius: 0 90px 90px;}
.radius36 {border-radius: 10px 10px 0;}
.radius37 {border-radius: 30px 30px 0;}
.radius38 {border-radius: 50px 50px 0;}
.radius39 {border-radius: 70px 70px 0;}
.radius40 {border-radius: 90px 90px 0;}
Sample05
border-radius
radius41
radius42
radius43
radius44
radius45
radius46
radius47
radius48
radius49
radius50
.radius41 {border-radius: 0px 0px 10px 10px;}
.radius42 {border-radius: 0px 0px 30px 30px;}
.radius43 {border-radius: 0px 0px 50px 50px;}
.radius44 {border-radius: 0px 0px 70px 10px;}
.radius45 {border-radius: 0px 0px 90px 90px;}
.radius46 {border-radius: 90px 90px 0px 0px;}
.radius47 {border-radius: 70px 70px 0px 0px;}
.radius48 {border-radius: 50px 50px 0px 0px;}
.radius49 {border-radius: 30px 30px 0px 0px;}
.radius50 {border-radius: 10px 10px 0px 0px;}
sample01
See the Pen border-radius learning tool by Lavi Perchik (@laviperchik) on CodePen.