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

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.radius09{border-radius:0px 0px;}
.radius10{border-radius:12px 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

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.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

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.radius25{border-radius: 0 20px 20px;}
.radius26{border-radius: 0px 40px 40px;}
.radius27{border-radius: 0px 60px 60px;}
.radius28{border-radius: 0px 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

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.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

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.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: 70% 60% 50% 70% / 70% 80% 60% 80%;}
.radius45{border-radius: 60% 80% 70% 70% / 70% 80% 50% 60%;}
.radius46{border-radius: 70% 80% 90% 70% / 70% 80% 90% 80%;}
.radius47{border-radius: 70% 80% 70% 70% / 60% 80% 80% 80%;}
.radius48{border-radius: 60% 80% 50% 50% / 70% 80% 60% 60%;}

sample07

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

sample08

See the Pen Border-radius Mocphing by 김용태 (@sdw6545) on CodePen.

sample09

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

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

sample01

sample01

sample01

sample01

sample01

sample01

sample01

sample01

sample01

sample01