

Border-radiusCSS Reference2019. 6. 28. 14:19
Table of Contents
반응형
border-radius
border-radius : [border-top-left-radius] [border-top-right-radius]
[border-bottom-right-radius] [border-bottom-left-radius]
border-radius
border01
border02
border03
border04
border05
border06
border07
border08
border09
border10
.border01 { border-radius: 0; }
.border02 { border-radius: 5px; }
.border03 { border-radius: 10px; }
.border04 { border-radius: 15px; }
.border05 { border-radius: 20px; }
.border06 { border-radius: 25px; }
.border07 { border-radius: 30px; }
.border08 { border-radius: 35px; }
.border09 { border-radius: 50px; }
.border10 { border-radius: 70px; animation: border10 2.5s infinite ease; }
border-radius
border11
border12
border13
border14
border15
border16
border17
border18
border19
border20
.border11 { border-radius: 0px 0px; }
.border12 { border-radius: 15px 0px; }
.border13 { border-radius: 30px 0px; }
.border14 { border-radius: 45px 0px; }
.border15 { border-radius: 60px 0px; }
.border16 { border-radius: 75px 0px; }
.border17 { border-radius: 90px 0px; }
.border18 { border-radius: 105px 0px; }
.border19 { border-radius: 120px 0px; }
.border20 { border-radius: 135px 0px; animation: border20 2.5s infinite ease-in-out; }
border-radius
border21
border22
border23
border24
border25
border26
border27
border28
border29
border30
.border21 { border-radius: 10px / 55px; }
.border22 { border-radius: 20px / 55px; }
.border23 { border-radius: 30px / 55px; }
.border24 { border-radius: 40px / 55px; }
.border25 { border-radius: 50px / 55px; }
.border26 { border-radius: 55px / 50px; }
.border27 { border-radius: 55px / 40px; }
.border28 { border-radius: 55px / 30px; }
.border29 { border-radius: 55px / 20px; }
.border30 { border-radius: 55px / 10px; }
border-radius
border31
border32
border33
border34
border35
border36
border37
border38
border39
border40
.border31 { border-radius: 0 30px 30px / 30px }
.border32 { border-radius: 0 40px 40px / 40px }
.border33 { border-radius: 0 50px 50px / 50px }
.border34 { border-radius: 0 60px 60px / 60px }
.border35 { border-radius: 0 70px 70px / 70px }
.border36 { border-radius: 30px 30px 0 / 30px }
.border37 { border-radius: 40px 40px 0 / 40px }
.border38 { border-radius: 50px 50px 0 / 50px }
.border39 { border-radius: 60px 60px 0 / 60px }
.border40 { border-radius: 70px 70px 0 / 70px }
border-radius
border41
border42
border43
border44
border45
border46
border47
border48
border49
border50
.border41 { border-radius: 0px 0px 30px 30px / 0px 0px 30px 30px; }
.border42 { border-radius: 0px 0px 40px 40px / 0px 0px 40px 40px; }
.border43 { border-radius: 0px 0px 50px 50px / 0px 0px 50px 50px; }
.border44 { border-radius: 0px 0px 60px 60px / 0px 0px 60px 60px; }
.border45 { border-radius: 0px 0px 70px 70px / 0px 0px 70px 70px; animation: border45 2.5s infinite ease-in; }
.border46 { border-radius: 30px 30px 0px 0px / 30px 0px 0px 0px; }
.border47 { border-radius: 40px 40px 0px 0px / 40px 40px 0px 0px; }
.border48 { border-radius: 50px 50px 0px 0px / 50px 50px 0px 0px; }
.border49 { border-radius: 60px 60px 0px 0px / 60px 60px 0px 0px; }
.border50 { border-radius: 70px 70px 0px 0px / 70px 70px 0px 0px; animation: border50 2.5s infinite ease-in; }
@keyframes border45 {
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; }
}
@keyframes border50 {
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; }
}
border-radius
border51
border52
border53
border54
border55
border56
border57
border58
border59
border60
.border51 { border-radius: 0px 0px 0px 10px; }
.border52 { border-radius: 0px 0px 0px 20px; }
.border53 { border-radius: 0px 0px 0px 30px; }
.border54 { border-radius: 0px 0px 0px 40px; }
.border55 { border-radius: 0px 0px 0px 50px; }
.border56 { border-radius: 0px 0px 0px 60px; }
.border57 { border-radius: 0px 0px 0px 70px; }
.border58 { border-radius: 0px 0px 0px 80px; }
.border59 { border-radius: 0px 0px 0px 90px; }
.border60 { border-radius: 0px 0px 0px 100px; }
border-radius
border61
border62
border63
border64
border65
border66
border67
border68
border69
border70
.border61 { border-radius: 50% 70% 55% 65% / 50% 45% 60% 30%; }
.border62 { border-radius: 40% 40% 55% 75% / 30% 45% 60% 75%; }
.border63 { border-radius: 55% 50% 55% 85% / 50% 25% 60% 40%; }
.border64 { border-radius: 55% 60% 55% 90% / 60% 45% 60% 45%; }
.border65 { border-radius: 60% 70% 55% 20% / 80% 60% 60% 85%; }
.border66 { border-radius: 65% 80% 55% 35% / 30% 45% 60% 45%; }
.border67 { border-radius: 70% 90% 55% 55% / 70% 45% 60% 25%; }
.border68 { border-radius: 75% 30% 55% 40% / 55% 70% 60% 45%; }
.border69 { border-radius: 80% 20% 55% 60% / 20% 30% 60% 10%; }
.border70 { border-radius: 90% 10% 55% 45% / 90% 45% 60% 50%; }
반응형

@HYUNJZZANG :: HyunZzang
HyunZzang의 프로그래밍 공간 / 함께 공부해요!!
도움이 되셨다면 "좋아요❤️" 또는 "구독👍🏻" 부탁드립니다 :)