| Property | Description |
|---|---|
| length | 테두리 굴곡을 CSS 단위로 설정합니다. |
| % | 테두리 굴곡을 %로 설정합니다. |
.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 {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: 1100px 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"> <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 {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: 70px/25px; }
50% {border-radius: 0px;}
75% {border-radius: 25px/700px; }
100% { border-radius: 0px;}
}
<div class="well clearfix"> <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">radius30</div> </div> </div>
.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="radius46">radius31</div> </div> <div class="block rad"> <div class="radius47">radius32</div> </div> <div class="block rad"> <div class="radius48">radius33</div> </div> <div class="block rad"> <div class="radius49">radius34</div> </div> <div class="block rad"> <div class="radius50">radius35</div> </div> <div class="block rad"> <div class="radius51">radius36</div> </div> <div class="block rad"> <div class="radius52">radius37</div> </div> <div class="block rad"> <div class="radius53">radius38</div> </div> <div class="block rad"> <div class="radius54">radius39</div> </div> <div class="block rad"> <div class="radius55">radius40</div> </div> <div class="block rad"> <div class="radius56">radius41</div> </div> <div class="block rad"> <div class="radius57">radius42</div> </div> <div class="block rad"> <div class="radius58">radius43</div> </div> <div class="block rad"> <div class="radius59">radius44</div> </div> <div class="block rad"> <div class="radius60">radius30</div> </div> </div>
.block.rad1 > div {background-color: #f06292;}
.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: #ea80fc; transform: rotate(90deg) ;}
20% {border-radius: 0px 0px 0px 0px; }
30% {border-radius: 0px 0px 140px 0px; background-color: #bbdefb; transform:rotate(180deg) ;}
40% {border-radius: 0px 0px 0px 0px; }
50% {border-radius: 0px 140px 0px 0px; background-color: #b2dfdb; transform: rotate(270deg);}
60% {border-radius: 0px 0px 0px 0px; }
70% {border-radius: 140px 0px 0px 0px;background-color: #f0f4c3; transform:rotate(360deg) ; }
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="radius46">radius31</div> </div> <div class="block rad"> <div class="radius47">radius32</div> </div> <div class="block rad"> <div class="radius48">radius33</div> </div> <div class="block rad"> <div class="radius49">radius34</div> </div> <div class="block rad"> <div class="radius50">radius35</div> </div> <div class="block rad"> <div class="radius51">radius36</div> </div> <div class="block rad"> <div class="radius52">radius37</div> </div> <div class="block rad"> <div class="radius53">radius38</div> </div> <div class="block rad"> <div class="radius54">radius39</div> </div> <div class="block rad"> <div class="radius55">radius40</div> </div> <div class="block rad"> <div class="radius56">radius41</div> </div> <div class="block rad"> <div class="radius57">radius42</div> </div> <div class="block rad"> <div class="radius58">radius43</div> </div> <div class="block rad"> <div class="radius59">radius44</div> </div> <div class="block rad"> <div class="radius60">radius30</div> </div> </div>
See the Pen border-radius learning tool by Lavi Perchik (@laviperchik) on CodePen.
See the Pen CSS3 Loading animations by Manoz (@Manoz) on CodePen.
See the Pen Google Style Loading Spinner - CSS by Daniel Cotton (@dancotton) on CodePen.
See the Pen Destiny Style Loading Icon by Keith Light (@keefyboooo) on CodePen.
See the Pen Water drop loader CSS animation by Rachel Smith (@rachsmith) on CodePen.