border-radius

문법

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

종류 예시
border-top-left-radius 테두리 굴곡을 윗부분 왼쪽에 설정합니다.
border-top-right-radius 테두리 굴곡을 윗부분 오른쪽에 설정합니다.
border-bottom-right-radius 테두리 굴곡을 아랫부분 오른쪽에 설정합니다.
border-bottom-left-radius 테두리 굴곡을 아랫부분 왼쪽에 설정합니다.

sample01

radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
.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
radius10
radius11
radius12
radius13
radius14
radius15
radius16
.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
radius18
radius19
radius20
radius21
radius22
radius23
radius24
.radius17 {border-radius: 10px / 55px; }
.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
radius26
radius27
radius28
radius29
radius30
radius31
radius32
.radius25 {border-radius: 0 30px 30px; }
.radius26 {border-radius: 0 40px 40px; }
.radius27 {border-radius: 0 60px 60px; }
.radius28 {border-radius: 0 80px 80px; }
.radius29 {border-radius: 30px 30px 0px; }
.radius30 {border-radius: 40px 40px 0px; }
.radius31 {border-radius: 60px 60px 0px; }
.radius32 {border-radius: 70px 80px 0px; }

sample05

radius33
radius34
radius35
radius36
radius37
radius38
radius39
radius40
.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
radius42
radius43
radius44
radius45
radius46
radius47
radius48
.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: 90% 80% 50% 70% / 90% 80% 50% 80%; }
.radius44 {border-radius: 90% 50% 80% 70% / 90% 50% 80% 80%; }
.radius45 {border-radius: 90% 80% 80% 50% / 90% 80% 80% 50%; }
.radius46 {border-radius: 50% 50% 80% 90% / 50% 75% 77% 90%; }
.radius47 {border-radius: 35% 90% 75% 75% / 50% 30% 50% 75%; }
.radius48 {border-radius: 80% 80% 30% 30% / 80% 80% 30% 30%; }

sample07

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

sample08

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

sample09

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