1
00:00:01,170 --> 00:00:01,710
‫Hey, there.

2
00:00:01,800 --> 00:00:02,460
‫Welcome back.

3
00:00:02,640 --> 00:00:05,010
‫Now, first thing I need to do is I know this.

4
00:00:08,330 --> 00:00:12,050
‫And get back to normal border on, I should say, a border radius.

5
00:00:12,530 --> 00:00:17,660
‫And if I save this one, you can see this is the normal border radius that current PBE are working.

6
00:00:18,590 --> 00:00:25,370
‫But if you observe one thing, whenever we do the scope, there is one side of horizontal bar and there

7
00:00:25,370 --> 00:00:29,720
‫is one side off what they call part whenever we try to do any type of call.

8
00:00:30,410 --> 00:00:37,210
‫So that means some part is dependent on horizontal and some part is dependent on vertical hit.

9
00:00:37,220 --> 00:00:45,020
‫I have passed 80 picks and that means I'm getting a perfect go because some part is dependent on horizontal

10
00:00:45,020 --> 00:00:47,840
‫remember, and some part is depending on where the goal.

11
00:00:50,620 --> 00:00:57,400
‫Now, let me describe this with the help of a guide available for free by nine elements dot com, and

12
00:00:57,400 --> 00:00:58,810
‫they also have a great tool.

13
00:00:58,810 --> 00:01:04,810
‫We are going to discuss about it in a while, but if I scroll down with this guide, you will see that

14
00:01:04,810 --> 00:01:06,880
‫currently we're passing a single value.

15
00:01:09,370 --> 00:01:15,760
‫So I suppose if I say border radius, 30 percent, you can pass percentage, although this 30 percent

16
00:01:15,760 --> 00:01:17,590
‫will be about our width and height.

17
00:01:17,860 --> 00:01:22,590
‫So if I say save now, you can see it's equal on all this height.

18
00:01:23,320 --> 00:01:23,800
‫Why?

19
00:01:24,220 --> 00:01:32,020
‫Because Steve, with this 200 pixel and high disk, 200 pixel so horizontal and vertical is equal at

20
00:01:32,020 --> 00:01:33,070
‫this point of time.

21
00:01:35,320 --> 00:01:40,870
‫Let me try to increase this and see maybe 400 by 400 pixel and save this one.

22
00:01:41,350 --> 00:01:43,650
‫I think this should be much better.

23
00:01:43,940 --> 00:01:46,930
‫Let me also try to decrease this to 70.

24
00:01:47,810 --> 00:01:48,280
‫OK.

25
00:01:49,490 --> 00:01:52,840
‫So you can see the scope is exact on all these side.

26
00:01:53,910 --> 00:02:01,950
‫Now, if by any chance, if I increase the height by four 50, that means 50 and decrease this with

27
00:02:02,160 --> 00:02:02,880
‫my hundred.

28
00:02:03,870 --> 00:02:06,030
‫So this is 300, this is 450.

29
00:02:06,030 --> 00:02:10,530
‫And if I save this one, you can see this is now changed.

30
00:02:10,980 --> 00:02:12,180
‫This is not equal.

31
00:02:12,180 --> 00:02:16,920
‫This 30 percent will depend on weight as well as height also.

32
00:02:17,220 --> 00:02:18,720
‫Let me repeat itself again.

33
00:02:19,020 --> 00:02:20,670
‫Go back to our changes.

34
00:02:21,630 --> 00:02:24,150
‫Save this one at this point of time.

35
00:02:24,570 --> 00:02:27,960
‫This depends on width and height, since both are equal.

36
00:02:27,960 --> 00:02:30,800
‫That means 30 percent will be 30 percent of this.

37
00:02:30,800 --> 00:02:31,950
‫This is one 20.

38
00:02:31,950 --> 00:02:36,990
‫Brexit are border areas, but if both of these values are changed.

39
00:02:40,320 --> 00:02:47,970
‫Let's say I read this 300 pixel an hour hiatus, 450 pixel, then 30 pixel will be calculated according

40
00:02:47,970 --> 00:02:53,490
‫to both horizontal and according to both horizontal as well as vertical bar.

41
00:02:54,060 --> 00:02:55,920
‫OK, let me get back to my inside.

42
00:02:56,430 --> 00:03:02,100
‫So that means if I'm baking 30 percent, it's equal since our size is equal currently.

43
00:03:02,550 --> 00:03:09,210
‫So we are dependent on this each, and this 30 percent means the distance from this point to our core.

44
00:03:09,630 --> 00:03:11,010
‫So this is 30 percent.

45
00:03:11,040 --> 00:03:13,980
‫This is 30 percent same polos for this and this.

46
00:03:16,490 --> 00:03:22,420
‫And if I take both as equal, maybe 400 by 400, save this one.

47
00:03:22,840 --> 00:03:29,020
‫So if you see this is 30 percent, that means 120 pixel same values with this.

48
00:03:30,170 --> 00:03:31,820
‫Now, if I get back to my guide.

49
00:03:33,950 --> 00:03:39,080
‫Now, suppose currently we apply 30 percent, that means all the values are equal.

50
00:03:40,080 --> 00:03:45,780
‫If we change this values, if we change value for this side, this side, this side and this side,

51
00:03:46,590 --> 00:03:47,760
‫the global change.

52
00:03:47,920 --> 00:03:53,760
‫So if I jump here with four different values, you can see this side, this side, this side in the

53
00:03:53,760 --> 00:03:54,570
‫slightest change.

54
00:03:55,320 --> 00:04:02,940
‫If you remember, we already took this for values, but things get tricky as soon as we define different

55
00:04:02,940 --> 00:04:03,570
‫values.

56
00:04:03,660 --> 00:04:08,880
‫For each individual part, that means that's what the goal bar and this horizontal bar.

57
00:04:09,390 --> 00:04:15,840
‫Because when this is different, when our weight and height is different, this horizontal length and

58
00:04:15,840 --> 00:04:22,400
‫this word length will be different because this is 400 bricks and this is 300 bucks.

59
00:04:23,040 --> 00:04:29,970
‫So 30 percent of 400 pixel will be different and 30 percent for 300 pixel will be different.

60
00:04:30,360 --> 00:04:33,330
‫So this land will be different and this land will be different.

61
00:04:33,690 --> 00:04:39,300
‫And that's where this horizontal radius value and vertical radius value content of Badger.

62
00:04:40,760 --> 00:04:44,300
‫So if you see now we are measuring these two different value.

63
00:04:44,840 --> 00:04:52,250
‫This is a this is B, this is a this is B, and we can pass these to value differently with the help

64
00:04:52,250 --> 00:04:53,210
‫of Slash.

65
00:04:53,840 --> 00:04:55,190
‫I hope you got the idea.

66
00:04:56,480 --> 00:05:02,660
‫Now, if I scroll down a bit, you can see we can pass all values differently for all corners.

67
00:05:02,930 --> 00:05:11,930
‫So if I say a b c d e f g h, you don't need to remember that you can always jump on two different guides

68
00:05:11,930 --> 00:05:14,390
‫or search, since this is an advanced concept.

69
00:05:14,750 --> 00:05:16,940
‫There will be certain tools that will help you.

70
00:05:17,480 --> 00:05:24,470
‫But here we can utilize the slash and pass different values for all different horizontal and vertical

71
00:05:24,470 --> 00:05:24,810
‫go.

72
00:05:27,080 --> 00:05:30,650
‫But for now, let me pass this light and pass two values.

73
00:05:30,980 --> 00:05:34,040
‫Now let me take 10 percent and 40 percent.

74
00:05:35,240 --> 00:05:43,640
‫So if you look at this example here, if you imagine a line, so this spot is 10 percent and this bag

75
00:05:44,000 --> 00:05:49,310
‫is 40 percent, and this is the change where it's happening now.

76
00:05:49,310 --> 00:05:54,290
‫At this point of time, we are passing the same values for this corner, this corner to this corner

77
00:05:54,290 --> 00:05:55,070
‫and this corner.

78
00:05:55,670 --> 00:06:01,940
‫But suppose if I want to pass for values, one value for this, this, this, this, that means we need

79
00:06:01,940 --> 00:06:04,100
‫to pass four different values.

80
00:06:04,550 --> 00:06:08,510
‫So at this point of time, we are passing these two values 10 and 40.

81
00:06:08,520 --> 00:06:15,770
‫But if we want to pass for values, that means this being this property, this blue theme and this yellow

82
00:06:15,770 --> 00:06:18,890
‫beam, we need to utilize this whole format.

83
00:06:19,340 --> 00:06:24,170
‫Now you don't need to remember this, but before that, let me jump on to a tool that will help you

84
00:06:24,170 --> 00:06:24,500
‫a lot.

85
00:06:25,660 --> 00:06:29,350
‫So this is a brilliant tool known as Fancy Border Radius.

86
00:06:29,740 --> 00:06:36,130
‫Now, head, if you want to design any type of content, you can just crawl these type of output and

87
00:06:36,130 --> 00:06:41,080
‫how you will get a value, whatever the important thing is to understand how these values work.

88
00:06:41,800 --> 00:06:46,750
‫You can jump onto the stool, copied this one and directly add the value here.

89
00:06:47,840 --> 00:06:54,470
‫And if I just show you the example, if I save this one, you can see we gotta share my exact shape

90
00:06:54,710 --> 00:06:56,420
‫that we have defined here.

91
00:06:57,050 --> 00:06:58,370
‫I hope you got the idea.

92
00:06:58,700 --> 00:07:06,140
‫Now what the Israelis do is if you look again, they have this idea that if it is 70 percent, that

93
00:07:06,140 --> 00:07:12,920
‫means is going to cover this 70 percent, if be 30 percent, that means B is going to cover the remaining

94
00:07:12,920 --> 00:07:13,670
‫30 percent.

95
00:07:14,210 --> 00:07:15,670
‫That is what happened here.

96
00:07:15,680 --> 00:07:17,780
‫Sixty nine plus 31, it's hundred percent.

97
00:07:18,080 --> 00:07:26,000
‫So if I say this, OK, this so this is going to be here 17 percent and this is going to be the eighty

98
00:07:26,000 --> 00:07:26,690
‫three percent.

99
00:07:27,470 --> 00:07:29,930
‫So after Slash, we are covering the vertical part.

100
00:07:29,930 --> 00:07:33,830
‫So this is going to be the E part, which is this.

101
00:07:35,000 --> 00:07:38,480
‫So if I say, if I decrease this, you can see this is changing.

102
00:07:40,360 --> 00:07:46,360
‫So if I need this ship, that means it and this is going to be B, then this is going to be the bottom

103
00:07:46,360 --> 00:07:46,810
‫values.

104
00:07:47,110 --> 00:07:50,080
‫Now here we have C and with the sea here, be here.

105
00:07:50,530 --> 00:07:58,210
‫So if you observe 60 or 70 percent a sea and 33 percent is the if I change this one, you can see this

106
00:07:58,210 --> 00:07:59,260
‫is 22 percent.

107
00:07:59,380 --> 00:08:01,570
‫This is going to be 78 percent.

108
00:08:02,110 --> 00:08:03,180
‫I hope you got the idea.

109
00:08:03,190 --> 00:08:04,800
‫So this is what isn't clear.

110
00:08:05,410 --> 00:08:12,850
‫Now we have this vertical layer, which is after slash 30 percent is here and 70 percent is here.

111
00:08:13,180 --> 00:08:14,170
‫So if you observe.

112
00:08:15,370 --> 00:08:18,520
‫This is me, and this is H, e and H.

113
00:08:19,270 --> 00:08:24,850
‫Now, similarly, we have this one, which is seventy three percent and this is 27 percent.

114
00:08:25,320 --> 00:08:27,700
‫If you see I change this one, you get the idea.

115
00:08:28,790 --> 00:08:31,180
‫I hope you got the idea how these are working.

116
00:08:31,180 --> 00:08:32,590
‫You don't need to remember them.

117
00:08:32,800 --> 00:08:35,380
‫And if I save this one, you can see the shape.

118
00:08:36,570 --> 00:08:41,430
‫So that's how you can create crazy shapes with this border radius.

119
00:08:41,940 --> 00:08:44,430
‫I hope you remember about this concept.

120
00:08:44,790 --> 00:08:47,460
‫You don't need to remember this exact position.

121
00:08:47,880 --> 00:08:50,550
‫Once you understand this, things will be easier for you.

122
00:08:51,650 --> 00:08:54,760
‫Now, one other thing, which is about the short values.

123
00:08:54,800 --> 00:08:56,180
‫So if you observe had.

124
00:08:58,990 --> 00:09:06,140
‫If I remove this one for 19, 20 percent, it is going to work great, that means all tired.

125
00:09:06,460 --> 00:09:11,110
‫But if I were to pass two values, maybe 20 percent and 50 percent save this one.

126
00:09:11,620 --> 00:09:15,340
‫Now what happened is this is going to be top left and bottom right.

127
00:09:15,670 --> 00:09:19,330
‫And this where live is going to be top right as well as bottom left.

128
00:09:20,410 --> 00:09:23,050
‫That's it, so I hope this lecture was helpful.

129
00:09:23,080 --> 00:09:30,520
‫Make sure to utilize this resource to design this crazy border radius and also you can change the background

130
00:09:30,520 --> 00:09:31,810
‫and control a lot of thing.

131
00:09:32,900 --> 00:09:35,810
‫Thank you for following, and I see you guys in the next one.