border-radius
Animation Reference v1.0 </doc>

border-radius

border-radius 속성은 모서리 굴곡을 설정합니다.

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

border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px;
border-radius: 0px 0px 0px / 0px 0px 0px 0px;
border-radius: 0px 0px / 0px 0px 0px 0px;
border-radius: 0px / 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px
border-radius: 0px 0px 0px
border-radius: 0px 0px
border-radius: 0px
X축 / Y축
top left / top right / bottom right / bottom left

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: 70px;}
.radius09 {border-radius: 80px;}
.radius10 {border-radius: 90px;}

Sample02

.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: 130px 0px;}
.radius20 {border-radius: 145px 0px;}

Sample03

.radius21 {border-radius: 10px / 55px}
.radius22 {border-radius: 20px / 55px}
.radius23 {border-radius: 30px / 55px}
.radius24 {border-radius: 40px / 55px}
.radius25 {border-radius: 50px / 55px}
.radius26 {border-radius: 55px / 50px}
.radius27 {border-radius: 55px / 40px}
.radius28 {border-radius: 55px / 30px}
.radius29 {border-radius: 55px / 20px}
.radius30 {border-radius: 55px / 10px}

Sample04

.radius31 {border-radius: 0 30px 30px / 30px;}
.radius32 {border-radius: 0 40px 40px / 40px;}
.radius33 {border-radius: 0 50px 50px / 60px;}
.radius34 {border-radius: 0 60px 60px / 70px;}
.radius35 {border-radius: 0 70px 70px / 70px;}
.radius36 {border-radius: 30px 30px 0 / 30px;}
.radius37 {border-radius: 40px 40px 0 / 40px;}
.radius38 {border-radius: 50px 50px 0 / 50px;}
.radius39 {border-radius: 60px 60px 0 / 60px;}
.radius40 {border-radius: 70px 70px 0 / 70px;}

Sample05

.radius41 {border-radius: 0 0 30px 30px / 0 0 10px 10px;}
.radius42 {border-radius: 0 0 40px 40px / 0 0 30px 30px;}
.radius43 {border-radius: 0 0 50px 50px / 0 0 50px 50px;}
.radius44 {border-radius: 0 0 70px 70px / 0 0 70px 70px;}
.radius45 {border-radius: 0 0 90px 90px / 0 0 90px 90px;}
.radius46 {border-radius: 30px 30px 0 0;}
.radius47 {border-radius: 40px 40px 0 0;}
.radius48 {border-radius: 50px 50px 0 0;}
.radius49 {border-radius: 70px 70px 0 0;}
.radius50 {border-radius: 90px 90px 0 0;}

Sample06

.radius51 {border-radius: 50% 70% 55% 65% / 50% 45% 60% 45%;}
.radius52 {border-radius: 40% 40% 58% 65% / 60% 45% 60% 45%;}
.radius53 {border-radius: 55% 50% 55% 65% / 20% 65% 71% 45%;}
.radius54 {border-radius: 57% 60% 35% 75% / 60% 45% 60% 45%;}
.radius55 {border-radius: 55% 70% 45% 65% / 80% 45% 37% 45%;}
.radius56 {border-radius: 30% 50% 75% 55% / 53% 45% 60% 45%;}
.radius57 {border-radius: 40% 70% 55% 55% / 36% 45% 68% 45%;}
.radius58 {border-radius: 60% 70% 37% 52% / 73% 45% 60% 45%;}
.radius59 {border-radius: 50% 70% 36% 25% / 48% 27% 60% 45%;}
.radius60 {border-radius: 46% 70% 75% 75% / 73% 45% 73% 41%;}

border-radius learning tool

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