[CSS] Border-radius | sohinggu๑°⌓°๑

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 3s infinite ease;}
@keyframes border10 {
    0% {border-radius: 70px;}
    50% {border-radius: 0;}
    100% {border-radius: 70px;}
}

border-radius

border11

border12

border13

border14

border15

border16

border17

border18

border19

border20

.border11 {border-radius: 0 0;}
.border12 {border-radius: 15px 0;}
.border13 {border-radius: 30px 0;}
.border14 {border-radius: 45px 0;}
.border15 {border-radius: 60px 0;}
.border16 {border-radius: 75px 0;}
.border17 {border-radius: 90px 0;}
.border18 {border-radius: 105px 0;}
.border19 {border-radius: 120px 0;}
.border20 {border-radius: 135px 0; animation: border20 3s infinite ease;}
@keyframes border20 {
    0% {border-radius: 135px 0;}
    50% {border-radius: 0 0;}
    100% {border-radius: 135px 0;}
}

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 30px / 30px}
.border37 {border-radius: 40px 40px 40px / 40px}
.border38 {border-radius: 50px 50px 50px / 50px}
.border39 {border-radius: 60px 60px 60px / 60px}
.border40 {border-radius: 70px 70px 70px / 70px}

border-radius

border41

border42

border43

border44

border45

border46

border47

border48

border49

border50

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

border-radius

border51

border52

border53

border54

border55

border56

border57

border58

border59

border60

.border51 {border-radius: 0 0 0 10px}
.border52 {border-radius: 0 0 0 20px}
.border53 {border-radius: 0 0 0 30px}
.border54 {border-radius: 0 0 0 40px}
.border55 {border-radius: 0 0 0 50px}
.border56 {border-radius: 0 0 0 60px}
.border57 {border-radius: 0 0 0 70px}
.border58 {border-radius: 0 0 0 80px}
.border59 {border-radius: 0 0 0 90px}
.border60 {border-radius: 0 0 0 100px}

border-radius

border61

border62

border63

border64

border65

border66

border67

border68

border69

border70

.border61 {border-radius: 50% 80% 70% 80% / 70% 50% 85% 60%}
.border62 {border-radius: 90% 45% 85% 60% / 60% 90% 50% 80%}
.border63 {border-radius: 75% 90% 30% 50% / 50% 60% 55% 45%}
.border64 {border-radius: 45% 75% 60% 90% / 90% 75% 80% 70%}
.border65 {border-radius: 60% 80% 70% 80% / 70% 80% 60% 40%}
.border66 {border-radius: 75% 50% 65% 45% / 70% 65% 75% 55%}
.border67 {border-radius: 50% 65% 80% 35% / 70% 45% 90% 75%}
.border68 {border-radius: 85% 70% 50% 80% / 70% 90% 55% 60%}
.border69 {border-radius: 40% 80% 60% 90% / 70% 30% 45% 85%}
.border70 {border-radius: 70% 65% 45% 85% / 25% 45% 60% 50%}

border-radius

See the Pen Border radius by Pogany (@giaco) on CodePen.