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 {border-radius: 140px 0px;}
<div class="well clearfix">
    <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>
</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: 25px/70px;}
                    .radius40{border-radius: 25px/60px;}
                    .radius41{border-radius: 25px/50px;}
                    .radius42{border-radius: 25px/40px;}
                    .radius43{border-radius: 25px/30px;}
                    .radius44{border-radius: 25px/20px;}
                    .radius45 {
                        animation-name : radius45;
                        animation-duration: 2s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                    }
                    @keyframes radius45{
                        0% {border-radius: 0px; }
                        25% {border-radius: 100px/25px; }
                        50% {border-radius: 0px; }
                        75% {border-radius: 25px/100px; }
                        100% {border-radius: 0px; }
                    }
                    
<div class="well clearfix">
    <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>
</div>
radius46
radius47
radius48
radius49
radius50
radius51
radius52
radius53
radius54
radius55
radius56
radius57
radius58
radius59
radius60
                    .radius46 {border-radius: 0px 0px 0px 0px;}
                    .radius47 {border-radius:0px 0px 0px 10px;}
                    .radius48 {border-radius:0px 0px 0px 20px;}
                    .radius49 {border-radius:0px 0px 0px 30px;}
                    .radius50 {border-radius:0px 0px 0px 40px;}
                    .radius51 {border-radius:0px 0px 0px 50px;}
                    .radius52 {border-radius:0px 0px 0px 60px;}
                    .radius53 {border-radius:0px 0px 0px 70px;}
                    .radius54 {border-radius:0px 0px 0px 80px;}
                    .radius55 {border-radius:0px 0px 0px 90px;}
                    .radius56 {border-radius:0px 0px 0px 100px;}
                    .radius57 {border-radius:0px 0px 0px 110px;}
                    .radius58 {border-radius:0px 0px 0px 120px;}
                    .radius59 {border-radius:0px 0px 0px 130px;}
                    .radius60 { 
                        animation-name : radius60;
                        animation-duration: 1s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                    }
                    @keyframes radius60{
                        0% {border-radius: 0px; }            
                        50% {border-radius:0px 0px 0px 140px; }
                        100% {border-radius: 0px; }
                    }
                
                    
<div class="well clearfix">
    <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>
</div>
sample01
sample02
sample03
sample04
sample05
sample06
sample07
sample08
sample09
sample10
                    .block.rad1 > div {background-color: powderblue;}
                    .sample01 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0s;
                    }
                    .sample02 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.1s;
                    }
                    .sample03 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.2s;
                    }
                    .sample04 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.3s;
                        
                    }
                    .sample05 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.4s;
                        
                    }
                    .sample06 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.5s;
                        
                    }
                    .sample07 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.6s;
                    }
                    .sample08 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.7s;
                        
                    }
                    .sample09 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.8s;
                        
                    }
                    .sample10 {
                        animation-name: radius-sample1;
                        animation-duration: 5s;
                        animation-timing-function: ease-in-out;
                        animation-iteration-count: 100;
                        animation-delay: 0.9s;
                        
                    }

                    
                    @keyframes radius-sample1{
                        0% {border-radius: 0px 0px 0px 0px;}
                        10% {border-radius: 0px 0px 0px 140px; background-color: #bbdefb; transform: rotate(90deg);}
                        20% {border-radius: 0px 0px 0px 0px;}
                        30% {border-radius: 0px 0px 140px 0px;background-color: #c5cae9 ; transform: rotate(90deg);}
                        40% {border-radius: 0px 0px 0px 0px;}
                        50% {border-radius: 0px 140px 0px 0px;background-color: #d1c4e9 ; transform: rotate(90deg);}
                        60% {border-radius: 0px 0px 0px 0px;}
                        70% {border-radius: 140px 0px 0px 0px;background-color: #b2dfdb ; transform: rotate(90deg);}
                        80% {border-radius: 0px 0px 0px 0px;}
                        90% {border-radius: 140px 140px 140px 140px;}
                        100% {border-radius: 0px 0px 0px 0px;}
                    }
                    
<div class="well clearfix">
    <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>
</div>

codepen

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

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

See the Pen css tunnel by Danilo (@daniloisr) on CodePen.

See the Pen Inside by Bali Balo (@bali_balo) on CodePen.

See the Pen Arcify by Jezen Thomas (@jezen) on CodePen.

See the Pen Water drop loader CSS animation by Rachel Smith (@rachsmith) on CodePen.

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