border-radius Reference v1.0 </doc>

border-radius

문법

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

sample01

.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 {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 {border-radius: 10px / 55px;}
.radius18 {border-radius: 30px / 55px;}
.radius19 {border-radius: 50px / 55px;}
.radius20 {border-radius: 70px / 55px;}
.radius21 {border-radius: 10px 55px;}
.radius22 {border-radius: 30px 55px;}
.radius23 {border-radius: 50px 55px;}
.radius24 {border-radius: 70px 55px;}

sample04

.radius25 {border-radius: 0px 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

.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 {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% / 69% 80% 99% 80%} 
.radius45 {border-radius: 59% 90% 99% 70% / 69% 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 webstory (@webstoryboys) on CodePen.

sample0p

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