Border-radius

border-radius : {langth} {%};
property Description
langth 테두리 굴곡을 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: 10px 0px; }
    .radius27  {border-radius: 100px 0px; }
    .radius28  {border-radius: 110px 0px; }
    .radius29  {border-radius: 120px 0px; }
    .radius30  {border-radius: 130px 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>
   </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 {border-radius: 25px/10px; }
  <div class="well clearfix mt50">
     <div class="block rad">
       <div class="radius31">radius31</div>
     </div>
     <div class="block rad">
       <div class="radius32">radius32</div>
     </div>
     <div class="block rad">
       <div class="radius33">radius33</div>
     </div>
     <div class="block rad">
       <div class="radius34">radius34</div>
     </div>
     <div class="block rad">
       <div class="radius35">radius35</div>
     </div>
     <div class="block rad">
       <div class="radius36">radius36</div>
     </div>
     <div class="block rad">
       <div class="radius37">radius37</div>
     </div>
     <div class="block rad">
       <div class="radius38">radius38</div>
     </div>
     <div class="block rad">
       <div class="radius39">radius39</div>
     </div>
     <div class="block rad">
       <div class="radius40">radius40</div>
     </div>
     <div class="block rad">
       <div class="radius41">radius41</div>
     </div>
     <div class="block rad">
       <div class="radius42">radius42</div>
     </div>
     <div class="block rad">
       <div class="radius43">radius43</div>
     </div>
     <div class="block rad">
       <div class="radius44">radius44</div>
     </div>
     <div class="block rad">
       <div class="radius45">radius45</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 {border-radius: 0px 0px 0px 140px; }
  <div class="well clearfix mt50">
     <div class="block rad">
       <div class="radius46">radius46</div>
     </div>
     <div class="block rad">
       <div class="radius47">radius47</div>
     </div>
     <div class="block rad">
       <div class="radius48">radius48</div>
     </div>
     <div class="block rad">
       <div class="radius49">radius49</div>
     </div>
     <div class="block rad">
       <div class="radius50">radius50</div>
     </div>
     <div class="block rad">
       <div class="radius51">radius51</div>
     </div>
     <div class="block rad">
       <div class="radius52">radiu52</div>
     </div>
     <div class="block rad">
       <div class="radius53">radius53</div>
     </div>
     <div class="block rad">
       <div class="radius54">radius54</div>
     </div>
     <div class="block rad">
       <div class="radius55">radius55</div>
     </div>
     <div class="block rad">
       <div class="radius56">radius56</div>
     </div>
     <div class="block rad">
       <div class="radius57">radius57</div>
     </div>
     <div class="block rad">
       <div class="radius58">radius58</div>
     </div>
     <div class="block rad">
       <div class="radius59">radius59</div>
     </div>
     <div class="block rad">
       <div class="radius60">radius60</div>
     </div>
   </div> 
sample01
sample02
sample03
sample04
sample05
sample06
sample07
sample08
sample09
sample10
    .block.rad1 > div {background-color: #0f5d71; }
    .sample01 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0s;
    }
    .sample02 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.1s;
    }
    .sample03 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.2s;
    }
    .sample04 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.3s;
    }
    .sample05 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.4s;
    }
    .sample06 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.5s;
    }
    .sample07 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.6s;
    }
    .sample08 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.7s;
    }
    .sample09 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        animation-timing-function : ease-in-out;
        animation-iteration-count : 100;
        animation-delay: 0.8s;
    }
    .sample10 {
        animation-name : radius-sample1;
        animation-duration : 4s;
        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: #0183b3; transform : rotate(90deg);}
        20% {border-radius: 0px 0px 0px 0px; }
        30% {border-radius: 0px 0px 140px 0px; }
        40% {border-radius: 0px 0px 0px 0px; background-color: #00796b; transform : rotate(180deg); }
        50% {border-radius: 0px 140px 0px 0px; }
        60% {border-radius: 0px 0px 0px 0px; background-color: #80deea; transform : rotate(270deg); }
        70% {border-radius: 140px 0px 0px 0px; }
        80% {border-radius: 0px 0px 0px 0px; background-color: #80d8ff; transform : rotate(360deg); }
        90% {border-radius: 140px 140px 140px 140px; }
        100% {border-radius: 0px 0px 0px 0px; }
    }
  

codepen

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

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

See the Pen Makisu by Justin Windle (@soulwire) on CodePen.

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

See the Pen Hexagon transformer by Rplus (@Rplus) on CodePen.

See the Pen All the border-radius' by Chris Coyier (@chriscoyier) on CodePen.