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 / 55px} /*x축 y축*/
.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

.radius25{border-radius: 0 20px 20px} /*0 20px 20px /0 20px 20px */
.radius26{border-radius: 0 40px 40px}
.radius27{border-radius: 0 50px 50px}
.radius28{border-radius: 0 80px 80px}
.radius29{border-radius: 30px 30px 0px}
.radius30{border-radius: 40px 40px 0px}
.radius31{border-radius: 50px 50px 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% 60% 90% / 70% 80% 50% 90%;}
.radius42{border-radius: 70% 80% 70% 70% / 70% 80% 50% 80%;}
.radius43{border-radius: 50% 80% 60% 55% / 50% 80% 50% 70%;}
.radius44{border-radius: 70% 50% 60% 50% / 40% 50% 50% 40%;}
.radius45{border-radius: 80% 50% 60% 50% / 80% 50% 80% 50%;}
.radius46{border-radius: 80% 50% 60% 50% / 80% 50% 80% 50%;}
.radius47{border-radius: 90% 50% 60% 50% / 90% 50% 50% 40%;}
.radius48{border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}

Sample07

See the Pen Border-radius Morphing by HyunJi (@ahjee12) on CodePen.

Sample08

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

Sample09

See the Pen Border-gradient mixin by John Grishin (@exah) on CodePen.

Sample09