Border-radius

border-radius : :length} {%};
Property Description
length 테두리 굴곡을 CSS 단위로 설정합니다
% 테두리 굴곡을 %단위로 설정합니다
radius01
radius02
radius03
radius04
radius05
radius06
radius07
radius08
radius09
radius10
radius11
radius12
radius13
radius14
radius15
.radius01 {border-radius: 0px;}
.radius02 {border-radius: 5px;}
.radius03 {border-radius: 10px;}
.radius04 {border-radius: 15px;}
.radius05 {border-radius: 20px;}
.radius06 {border-radius: 25px;}
.radius07 {border-radius: 30px;}
.radius08 {border-radius: 35px;}
.radius09 {border-radius: 40px;}
.radius10 {border-radius: 45px;}
.radius11 {border-radius: 50px;}
.radius12 {border-radius: 55px;}
.radius13 {border-radius: 60px;}
.radius14 {border-radius: 65px;}
.radius15 {border-radius: 70px;}
<div class="well clearfix">
    <div class="block rad">
        <div class="radius01">radius01</div>
    </div>
    <div class="block rad">
        <div class="radius02">radius02</div>
    </div>
    <div class="block rad">
        <div class="radius03">radius03</div>
    </div>
    <div class="block rad">
        <div class="radius04">radius04</div>
    </div>
    <div class="block rad">
        <div class="radius05">radius05</div>
    </div>
    <div class="block rad">
        <div class="radius06">radius06</div>
    </div>
    <div class="block rad">
        <div class="radius07">radius07</div>
    </div>
    <div class="block rad">
        <div class="radius08">radius08</div>
    </div>
    <div class="block rad">
        <div class="radius09">radius09</div>
    </div>
    <div class="block rad">
        <div class="radius10">radius10</div>
    </div>
    <div class="block rad">
        <div class="radius11">radius11</div>
    </div>
    <div class="block rad">
        <div class="radius12">radius12</div>
    </div>
    <div class="block rad">
        <div class="radius13">radius13</div>
    </div>
    <div class="block rad">
        <div class="radius14">radius14</div>
    </div>
    <div class="block rad">
        <div class="radius15">radius15</div>
    </div>
</div>
radius16
radius17
radius18
radius19
radius20
radius21
radius22
radius23
radius24
radius25
radius26
radius27
radius28
radius29
radius30
.radius16 {border-radius: 0px 0px;}
.radius17 {border-radius: 10px 0px;}
.radius18 {border-radius: 20px 0px;}
.radius19 {border-radius: 30px 0px;}
.radius20 {border-radius: 40px 0px;}
.radius21 {border-radius: 50px 0px;}
.radius22 {border-radius: 60px 0px;}
.radius23 {border-radius: 70px 0px;}
.radius24 {border-radius: 80px 0px;}
.radius25 {border-radius: 90px 0px;}
.radius26 {border-radius: 100px 0px;}
.radius27 {border-radius: 110px 0px;}
.radius28 {border-radius: 120px 0px;}
.radius29 {border-radius: 130px 0px;}
 .radius30 {
    animation-name: radius30;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;
}
@keyframes radius30 {
    0% { border-radius: 0px; }
    50% { border-radius: 140px 0px; }
    100% { border-radius: 0px; }
} 
<div class="well clearfix mt50">
    <div class="block rad">
        <div class="radius16">radius16</div>
    </div>
    <div class="block rad">
        <div class="radius17">radius17</div>
    </div>
    <div class="block rad">
        <div class="radius18">radius18</div>
    </div>
    <div class="block rad">
        <div class="radius19">radius19</div>
    </div>
    <div class="block rad">
        <div class="radius20">radius20</div>
    </div>
    <div class="block rad">
        <div class="radius21">radius21</div>
    </div>
    <div class="block rad">
        <div class="radius22">radius22</div>
    </div>
    <div class="block rad">
        <div class="radius23">radius23</div>
    </div>
    <div class="block rad">
        <div class="radius24">radius24</div>
    </div>
    <div class="block rad">
        <div class="radius25">radius25</div>
    </div>
    <div class="block rad">
        <div class="radius26">radius26</div>
    </div>
    <div class="block rad">
        <div class="radius27">radius27</div>
    </div>
    <div class="block rad">
        <div class="radius28">radius28</div>
    </div>
    <div class="block rad">
        <div class="radius29">radius29</div>
    </div>
    <div class="block rad">
        <div class="radius30">radius30</div>
</div>
radius31
radius32
radius33
radius34
radius35
radius36
radius37
radius38
radius39
radius40
radius41
radius42
radius43
radius44
radius45
.radius31 {border-radius: 0px/25px;}
.radius32 {border-radius: 10px/25px;}
.radius33 {border-radius: 20px/25px;}
.radius34 {border-radius: 30px/25px;}
.radius35 {border-radius: 40px/25px;}
.radius36 {border-radius: 50px/25px;}
.radius37 {border-radius: 60px/25px;}
.radius38 {border-radius: 70px/25px;}
.radius39 {border-radius: 80px/25px;}
.radius40 {border-radius: 90px/25px;}
.radius41 {border-radius: 100px/25px;}
.radius42 {border-radius: 110px/25px;}
.radius43 {border-radius: 120px/25px;}
.radius44 {border-radius: 130px/25px;}
.radius45 {
    animation-name: radius45;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;
}
@keyframes radius45 {
    0% { border-radius: 0px; }
    25% { border-radius : 10px/25px;}
    50% { border-radius: 140px/0px; }
    75% { border-radius : 20px/15px;}
    100% { border-radius: 0px; }
}        
<div class="well clearfix mt50">
    <div class="block rad">
        <div class="radius16">radius16</div>
    </div>
    <div class="block rad">
        <div class="radius17">radius17</div>
    </div>
    <div class="block rad">
        <div class="radius18">radius18</div>
    </div>
    <div class="block rad">
        <div class="radius19">radius19</div>
    </div>
    <div class="block rad">
        <div class="radius20">radius20</div>
    </div>
    <div class="block rad">
        <div class="radius21">radius21</div>
    </div>
    <div class="block rad">
        <div class="radius22">radius22</div>
    </div>
    <div class="block rad">
        <div class="radius23">radius23</div>
    </div>
    <div class="block rad">
        <div class="radius24">radius24</div>
    </div>
    <div class="block rad">
        <div class="radius25">radius25</div>
    </div>
    <div class="block rad">
        <div class="radius26">radius26</div>
    </div>
    <div class="block rad">
        <div class="radius27">radius27</div>
    </div>
    <div class="block rad">
        <div class="radius28">radius28</div>
    </div>
    <div class="block rad">
        <div class="radius29">radius29</div>
    </div>
    <div class="block rad">
        <div class="radius30">radius30</div>
</div>
radius46
radius47
radius48
radius49
radius50
radius51
radius52
radius53
radius54
radius55
radius56
radius57
radius58
radius59
radius60
.radius46 { border-radius:  0px 0px 0px 10px}
.radius47 { border-radius:  0px 0px 0px 20px}
.radius48 { border-radius:  0px 0px 0px 30px}
.radius49 { border-radius:  0px 0px 0px 40px}
.radius50 { border-radius:  0px 0px 0px 50px}
.radius51 { border-radius:  0px 0px 0px 60px}
.radius52 { border-radius:  0px 0px 0px 70px}
.radius53 { border-radius:  0px 0px 0px 80px}
.radius54 { border-radius:  0px 0px 0px 90px}
.radius55 { border-radius:  0px 0px 0px 100px}
.radius56 { border-radius:  0px 0px 0px 110px}
.radius57 { border-radius:  0px 0px 0px 120px}
.radius58 { border-radius:  0px 0px 0px 130px}
.radius59 { border-radius:  0px 0px 0px 140px}
.radius60 {
        animation-name: radius1;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 100;
    }
    @keyframes radius1 {
        0% { border-radius: 0px; }
        50% { border-radius: 0px 0px 0px 110px}
        100% { border-radius: 0px; }
<div class="well clearfix mt50">
    <div class="block rad">
        <div class="radius16">radius16</div>
    </div>
    <div class="block rad">
        <div class="radius17">radius17</div>
    </div>
    <div class="block rad">
        <div class="radius18">radius18</div>
    </div>
    <div class="block rad">
        <div class="radius19">radius19</div>
    </div>
    <div class="block rad">
        <div class="radius20">radius20</div>
    </div>
    <div class="block rad">
        <div class="radius21">radius21</div>
    </div>
    <div class="block rad">
        <div class="radius22">radius22</div>
    </div>
    <div class="block rad">
        <div class="radius23">radius23</div>
    </div>
    <div class="block rad">
        <div class="radius24">radius24</div>
    </div>
    <div class="block rad">
        <div class="radius25">radius25</div>
    </div>
    <div class="block rad">
        <div class="radius26">radius26</div>
    </div>
    <div class="block rad">
        <div class="radius27">radius27</div>
    </div>
    <div class="block rad">
        <div class="radius28">radius28</div>
    </div>
    <div class="block rad">
        <div class="radius29">radius29</div>
    </div>
    <div class="block rad">
        <div class="radius30">radius30</div>
</div>
sample01
sample02
sample03
sample04
sample05
sample06
sample07
sample08
sample09
sample10
.block.rad1 > div {background-color: lightcoral;}
.sample01 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;
    animation-delay :0.1s;
}
 .sample02 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.2s;

}
 .sample03 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.3s;

}
 .sample04 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                
    animation-delay :0.4s;

}
 .sample05 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.5s;

}
 .sample06 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.6s;

}
 .sample07 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.7s;

}
 .sample08 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.81s;

}
 .sample09 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 100;                                                 
    animation-delay :0.9s;

}

.sample10 {
    animation-name : radius-sample1;
    animation-duration : 5s;
    animation-timing-function: ease-in-out;


}

@keyframes  radius-sample1 {
    0% {border-radius : 0px 0px 0px 0px;}
    10% {border-radius : 0px 0px 0px 140px; background-color: skyblue; transform: rotate(90deg);}
    20% {border-radius : 0px 0px 0px 0px;}
    30% {border-radius : 0px 0px 140px 0px; background-color: hotpink; transform: rotate(180deg);} 
    40% {border-radius : 0px 0px 0px 0px;}
    50% {border-radius : 0px 140px 0px 0px; background-color: powderblue; transform: rotate(270deg);}
    60% {border-radius : 0px 0px 0px 0px;}
    70% {border-radius : 140px 0px 0px 0px; background-color: hotpink; transform: rotate(360deg);}
    80% {border-radius : 0px 0px 0px 0px;}
    90% {border-radius : 0px 0px 140px 0px;}
    100% {border-radius : 0px 0px 0px 0px;}

}

<div class="well clearfix mt50">
    <div class="block rad">
        <div class="radius16">radius16</div>
    </div>
    <div class="block rad">
        <div class="radius17">radius17</div>
    </div>
    <div class="block rad">
        <div class="radius18">radius18</div>
    </div>
    <div class="block rad">
        <div class="radius19">radius19</div>
    </div>
    <div class="block rad">
        <div class="radius20">radius20</div>
    </div>
    <div class="block rad">
        <div class="radius21">radius21</div>
    </div>
    <div class="block rad">
        <div class="radius22">radius22</div>
    </div>
    <div class="block rad">
        <div class="radius23">radius23</div>
    </div>
    <div class="block rad">
        <div class="radius24">radius24</div>
    </div>
    <div class="block rad">
        <div class="radius25">radius25</div>
    </div>
    <div class="block rad">
        <div class="radius26">radius26</div>
    </div>
    <div class="block rad">
        <div class="radius27">radius27</div>
    </div>
    <div class="block rad">
        <div class="radius28">radius28</div>
    </div>
    <div class="block rad">
        <div class="radius29">radius29</div>
    </div>
    <div class="block rad">
        <div class="radius30">radius30</div>
</div>

codepen

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


See the Pen Yet more CSS loading animations by Adam Mustill (@amustill) on CodePen.


See the Pen Google Style Loading Spinner - CSS by Daniel Cotton (@dancotton) on CodePen.


See the Pen Rabbit by Beard Chicken by Katy DeCorah (@katydecorah) on CodePen.

See the Pen Gooey border-radius spinners by Nathan Taylor (@nathantaylor) on CodePen.