CSS: Border-Radius 에 대해서 알아봅시다!

Border-Radius

 

border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-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;} 

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;} 

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; } 

border31

border32

border33

border34

border35

border36

border37

border38

border39

border40

    .border31 {border-radius: 0px 30px 30px / 30px;}     .border32 {border-radius: 0px 40px 40px / 40px;}     .border33 {border-radius: 0px 50px 50px / 50px;}     .border34 {border-radius: 0px 60px 60px / 60px;}     .border35 {border-radius: 0px 70px 70px / 70px;}     .border36 {border-radius: 30px 30px 0px / 30px;}     .border37 {border-radius: 40px 40px 0px / 40px;}     .border38 {border-radius: 50px 50px 0px / 50px;}     .border39 {border-radius: 60px 60px 0px / 60px;}     .border40 {border-radius: 70px 70px 0px / 70px;} 

border41

border42

border43

border44

border45

border46

border47

border48

border49

border50

    .border41 {border-radius: 0px 0px 30px 30px / 30px 0px 30px 30px;}     .border42 {border-radius: 0px 0px 40px 40px / 40px 0px 40px 40px;}     .border43 {border-radius: 0px 0px 50px 50px / 50px 0px 50px 50px;}     .border44 {border-radius: 0px 0px 60px 60px / 60px 0px 60px 60px;}     .border45 {border-radius: 0px 0px 70px 70px / 70px 0px 70px 70px;}      .border46 {border-radius: 30px 30px 0px 0px / 30px 30px 0px 30px;}     .border47 {border-radius: 40px 40px 0px 0px / 40px 40px 0px 40px;}     .border48 {border-radius: 50px 50px 0px 0px / 50px 50px 0px 50px;}     .border49 {border-radius: 60px 60px 0px 0px / 60px 60px 0px 60px;}     .border50 {border-radius: 70px 70px 0px 0px / 70px 70px 0px 70px;} 

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;} 

border61

border62

border63

border64

border65

border66

border67

border68

border69

border70

      .border61 {border-radius: 50% 50% 50% 70% / 50% 50% 70% 60%; }     .border62 {border-radius: 50% 70% 50% 50% / 70% 60% 50% 50%; }     .border63 {border-radius: 50% 40% 50% 80% / 50% 45% 70% 50%; }     .border64 {border-radius: 80% 50% 40% 70% / 50% 70% 60% 60%; }     .border65 {border-radius: 60% 70% 60% 80% / 50% 80% 70% 60%; }     .border66 {border-radius: 50% 70% 50% 70% / 70% 50% 80% 70%; }     .border67 {border-radius: 50% 80% 60% 60% / 70% 50% 80% 70%; }     .border68 {border-radius: 40% 80% 70% 60% / 60% 70% 40% 70%; }     .border69 {border-radius: 50% 40% 50% 70% / 70% 50% 40% 60%; }     .border70 {border-radius: 70% 50% 50% 70% / 60% 40% 70% 50%; } 

Border-radius1

See the Pen Border-Radius Playground by Adam Kuhn (@cobra_winfrey) on CodePen.

Border-radius2

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

Border-radius3 (자갈 애니메이션)

See the Pen Border-radius Morphing by Jiwon Son (@jiwonson) on CodePen.