border-radius

문법

border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius

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

sample01

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.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: 80px; }

sample02

radius09
radius10
radius11
radius12
radius13
radius14
radius15
radius16
.radius01 {border-radius: 0px; }
.radius09 {border-radius: 0px 0px; }
.radius10 {border-radius: 15px 0px; }
.radius11 {border-radius: 30px 0px; }
.radius12 {border-radius: 45px 0px; }
.radius13 {border-radius: 60px 0px; }
.radius14 {border-radius: 75px 0px; }
.radius15 {border-radius: 90px 0px; }
.radius16 {border-radius: 115px 0px; }

sample03

radius17
radius18
radius19
radius20
radius21
radius22
radius23
radius24
.radius17 {border-radius: 10px / 55px; }
.radius18 {border-radius: 20px / 55px; }
.radius19 {border-radius: 30px / 55px; }
.radius20 {border-radius: 40px / 55px; }
.radius21 {border-radius: 55px / 10px; }
.radius22 {border-radius: 55px / 20px; }
.radius23 {border-radius: 55px / 30px; }
.radius24 {border-radius: 55px / 40px; }

sample04

radius25
radius26
radius27
radius28
radius29
radius30
radius31
radius32
.radius25 { border-radius:  0 20px 20px}
.radius26 { border-radius:  0 40px 40px;}
.radius27 { border-radius:  0 60px 60px;}
.radius28 { border-radius:  0 80px 80px;}

.radius29 { border-radius:  20px 20px 0px;}
.radius30 { border-radius:  40px 40px 0px;}
.radius31 { border-radius:  60px 60px 0px;}
.radius32 { border-radius:  80px 80px 0px;}

sample05

radius33
radius34
radius35
radius36
radius37
radius38
radius39
radius40
.radius33 { border-radius: 0px 0px 20px 20px;}
.radius34 { border-radius: 0px 0px 40px 40px;}
.radius35 { border-radius: 0px 0px 60px 60px;}
.radius36 { border-radius: 0px 0px 80px 80px;}

.radius37 { border-radius: 80px 80px 0px 0px;}
.radius38 { border-radius: 60px 60px 0px 0px;}
.radius39 { border-radius: 40px 40px 0px 0px;}
.radius40 { border-radius: 20px 20px 0px 0px;}

sample06

radius41
radius42
radius43
radius44
radius45
radius46
radius47
radius48
.radius41 {border-radius: 70% 80% 90% 70% / 70% 80% 90% 80%;}
.radius42 {border-radius: 50% 80% 90% 70% / 50% 80% 90% 80%;}
.radius43 {border-radius: 99% 80% 90% 70% / 99% 80% 90% 80%;}
.radius44 {border-radius: 59% 80% 99% 70% / 59% 80% 99% 80%;}
.radius45 {border-radius: 59% 90% 99% 70% / 59% 60% 99% 80%;}
.radius46 {border-radius: 50% 80% 90% 80% / 50% 80% 90% 70%;}
.radius47 {border-radius: 99% 80% 70% 70% / 99% 80% 90% 70%;}
.radius48 {border-radius:  99% 80% 90% 90% / 99% 90% 90% 99%;}

sample07

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

sample08

See the Pen Border-radius Morphing by lee sejin (@iuu0304) on CodePen.

sample09

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