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 {
animation-name : radius15;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 100;
}
@keyframes radius15{
	0% {border-radius: 0px;}
	50% {border-radius: 70px;}
	100% {border-radius: 0px;}
}
<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">
	<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: 1s;
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: 10px/25px;}
	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">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 {
animation-name : radius60;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 100;
}
@keyframes radius60{
	0% {border-radius: 0px 0px 0px 0px;}
	50% {border-radius: 0px 0px 0px 130px;}									
	100% {border-radius: 0px 0px 0px 0px;}
}
<div class="well clearfix">
	<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">radius52</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: 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 Circle, square, triangle, dolphin by Max Gruson (@bleepbloop) on CodePen.

See the Pen Loaders (WIP) by Tania LD (@TaniaLD) on CodePen.

See the Pen Blackout by Ee Venn Soh (@vennsoh) on CodePen.

See the Pen CSS Corner Shape Mixin by Ryan Dunn (@ryandunn) on CodePen.

See the Pen CSS Favourite Button by Jamie Coulter (@jcoulterdesign) on CodePen.

See the Pen Remix Challenge by David Jones (@VictoryDesign) on CodePen.

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.