Border-radius Reference v1.0 </doc>

Border-radius

문법

Border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius

Sample1

.sbox .box {border: 0; background: transparent;}
.sbox .box > div {transition: all 0.25s;}
.sbox .box > div:hover {border-radius: 0px;} /*전체적용*/
        
.box.rad1 > div {background-image: linear-gradient(to bottom left, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, 
    #cf6cc9 33%, #ee609c 66%, #ee609c 100%); }
.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 {
    animation-name: radius10;
    animation-duration: 1s;
    animation-iteration-count: 100;
}
@keyframes radius10 {
    0% {border-radius: 0px;}
    50% {border-radius: 60px;}
    100% {border-radius: 0px;}
}

Sample2

.box.rad2 > div {background-image: linear-gradient(to bottom left, #f77062 0%, #fe5196 100%);}
.radius11 {border-radius: 0px 0px;}
.radius12 {border-radius: 15px 0px;}
.radius13 {border-radius: 30px 0px;}
.radius14 {border-radius: 45px 0px;}
.radius15 {border-radius: 60px 0px;}
.radius16 {border-radius: 75px 0px;}
.radius17 {border-radius: 90px 0px;}
.radius18 {border-radius: 105px 0px;}
.radius19 {border-radius: 120px 0px;}
.radius20 {
    animation: radius20 1s 100;
}
@keyframes radius20 {
    0% {border-radius: 0px 0px;}
    50% {border-radius: 135px 0px;}
   100% {border-radius: 0px 0px;}
}

Sample3

.box.rad3 > div {background-image: linear-gradient(to top, #007adf 0%, #00ecbc 100%);}
.radius21 {border-radius : 10px / 55px;}
.radius22 {border-radius : 20px / 55px;}
.radius23 {border-radius : 30px / 55px;}
.radius24 {border-radius : 40px / 55px;}
.radius25 {border-radius : 50px / 55px;}
.radius26 {border-radius : 55px / 50px;}
.radius27 {border-radius : 55px / 40px;}
.radius28 {border-radius : 55px / 30px;}
.radius29 {border-radius : 55px / 20px;}
.radius30 {
    animation: radius30 1s 100;}
@keyframes radius30 {
    0% {border-radius: 10px / 55px;}
   50% {border-radius: 50px / 55px;}
   100% {border-radius: 10px / 55px;}
 }

Sample4

.box.rad4 > div {background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);}
.radius31 {border-radius: 0 30px 30px / 30px;}
.radius32 {border-radius: 0 40px 40px / 40px;}
.radius33 {border-radius: 0 50px 50px / 50px;}
.radius34 {border-radius: 0 60px 60px / 60px;}
.radius35 {border-radius: 0 70px 70px / 70px;}
.radius36 {border-radius: 30px 30px 0px / 30px;}
.radius37 {border-radius: 30px 40px 0px / 40px;}
.radius38 {border-radius: 30px 50px 0px / 50px;}
.radius39 {border-radius: 30px 60px 0px / 60px;}
.radius40 {border-radius: 30px 70px 0px / 70px;}

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

Sample5

.box.rad5 >div {background-image: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);}
.radius41 {border-radius: 0px 0px 30px 30px / 0px 0px 30px 30px;}
.radius42 {border-radius: 0px 0px 40px 40px / 0px 0px 40px 30px;}
.radius43 {border-radius: 0px 0px 50px 50px / 0px 0px 50px 50px;}
.radius44 {border-radius: 0px 0px 60px 60px / 0px 0px 60px 60px;}
.radius45 {animation: radius45 1s 100;}
@keyframes radius45 {
    0% {border-radius: 0px 0px 70px 70px / 0px 0px 70px 70px;}
    50% {border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px;}
    100% {border-radius: 0px 0px 70px 70px / 0px 0px 70px 70px;}
}
.radius46 {border-radius: 30px 30px 0px 0px / 30px 30px 0px 0px;}
.radius47 {border-radius: 40px 40px 0px 0px / 40px 40px 0px 0px;}
.radius48 {border-radius: 50px 50px 0px 0px / 50px 50px 0px 0px;}
.radius49 {border-radius: 60px 60px 0px 0px / 60px 60px 0px 0px;}
.radius50 {animation: radius50 1s 100;}
@keyframes radius50 {
    0% {border-radius: 70px 70px 0px 0px / 70px 70px 0px 0px;}
    50% {border-radius: 0px 0px 0px 0px / 0px 0px 0px 0px;}
    100% {border-radius: 70px 70px 0px 0px / 70px 70px 0px 0px;}
}

Sample6

.box.rad6 > div {background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);}
.radius51 {border-radius: 0px 0px 0px 10px;}
.radius52 {border-radius: 0px 0px 0px 20px;}
.radius53 {border-radius: 0px 0px 0px 30px;}
.radius54 {border-radius: 0px 0px 0px 40px;}
.radius55 {border-radius: 0px 0px 0px 50px;}
.radius56 {border-radius: 0px 0px 0px 60px;}
.radius57 {border-radius: 0px 0px 0px 70px;}
.radius58 {border-radius: 0px 0px 0px 80px;}
.radius59 {border-radius: 0px 0px 0px 90px;}
.radius60 {animation: radius60 2s 100 ease-in-out;}
@keyframes radius60 {
    0% {border-radius: 0px 0px 0px 0px;}
    20% {border-radius: 0px 0px 0px 100px;}
    40% {border-radius: 0px 0px 100px 0px;}
    60% {border-radius: 0px 100px 0px 0px;}
    80% {border-radius: 100px 0px 0px 0px;}
    100% {border-radius: 0px 0px 0px 0px;}
}

Sample7

.box.rad7 > div {background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);}
.radius61 {border-radius: 50% 70% 55% 65% / 40% 45% 60% 65%;}
.radius62 {border-radius: 70% 50% 95% 75% / 60% 60% 95% 90%;}
.radius63 {border-radius: 30% 35% 40% 55% / 40% 45% 60% 65%;}
.radius64 {border-radius: 90% 65% 80% 95% / 80% 95% 50% 95%;}
.radius65 {border-radius: 40% 55% 30% 65% / 40% 65% 60% 65%;}
.radius66 {border-radius: 20% 25% 30% 35% / 30% 35% 40% 45%;}
.radius67 {border-radius: 55% 65% 40% 70% / 60% 45% 60% 65%;}
.radius68 {border-radius: 70% 50% 40% 50% / 50% 60% 50% 60%;}
.radius69 {border-radius: 70% 80% 55% 75% / 40% 45% 70% 75%;}
.radius70 {border-radius: 50% 65% 55% 70% / 55% 70% 60% 75%;}

Morphing

See the Pen Border-radius Morphing by MiSolJeong (@Soool) on CodePen.

 body {background-image: linear-gradient(to bottom right, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);
  height: 100vh;
}

.radius {
  position: absolute; left : 50%; top : 50%;
  transform: translate(-50%, -50%);
  min-width: 200px;
  min-height: 200px;
  background-color: #bca5e3;
  width : 300px;
  height: 300px;
  box-shadow: 
    inset 10px 0 40px #a174db,
    inset -10px 0 20px #40245e,
    inset -40px 10px 110px #1b1648;
  animation: transform 15s ease-in-out infinite both alternate
}
@keyframes transform {
   0% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
   14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
   28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
   42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
   56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
   70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
   84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
   100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
}