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;  
animation-name: radius16;
animation-duration: 3s;
animation-iteration-count: 100;}
@keyframes radius16 { 
0% {border-radius: 0px 0px }
25% { border-radius: 115px 0px}
50% { border-radius: 0px 0px}
75% { border-radius: 0px 115px}
100% {border-radius: 0px 0px }
}

sample03

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

sample04

.radius25 {border-radius : 0px 20px 20px / 20px; }
.radius26 {border-radius : 0px 40px 40px / 40px; }
.radius27 {border-radius : 0px 60px 60px / 60px; }
.radius28 {border-radius : 0px 80px 80px / 80px; }

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

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 : 89% 80% 99% 70%  / 89% 80% 99% 80%}

.radius45  {border-radius : 60% 80% 70% 80%  / 89% 80% 99% 80%}
.radius46  {border-radius : 50% 80% 90% 70%  / 50% 80% 99% 80%}
.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 sjjin (@floatmoon) on CodePen.

sample09

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