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

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 20px 20px;}
.radius38 {border-radius: 60px 60px 40px 40px;}
.radius39 {border-radius: 40px 40px 60px 60px;}
.radius40 {border-radius: 20px 20px 80px 80px;}

Sample06

.radius41 {border-radius: 70% 80% 90% 70% / 70% 80% 90% 80%;}
.radius42 {border-radius: 60% 70% 60% 60% / 60% 70% 60% 70%;}
.radius43 {border-radius: 80% 80% 90% 70% / 90% 90% 90% 80%;}
.radius44 {border-radius: 80% 60% 90% 50% / 90% 60% 90% 50%;}
.radius45 {border-radius: 99% 99% 70% 70% / 99% 99% 80% 80%;}
.radius46 {border-radius: 70% 80% 50% 70% / 70% 80% 50% 80%;}
.radius47 {border-radius: 20% 80% 70% 70% / 60% 80% 70% 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 miki5237 (@miki5237) on CodePen.

Sample09

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