‫Hey, there.
‫Welcome back.
‫Now, first thing I need to do is I know this.
‫And get back to normal border on, I should say, a border radius.
‫And if I save this one, you can see this is the normal border radius that current PBE are working.
‫But if you observe one thing, whenever we do the scope, there is one side of horizontal bar and there
‫is one side off what they call part whenever we try to do any type of call.
‫So that means some part is dependent on horizontal and some part is dependent on vertical hit.
‫I have passed 80 picks and that means I'm getting a perfect go because some part is dependent on horizontal
‫remember, and some part is depending on where the goal.
‫Now, let me describe this with the help of a guide available for free by nine elements dot com, and
‫they also have a great tool.
‫We are going to discuss about it in a while, but if I scroll down with this guide, you will see that
‫currently we're passing a single value.
‫So I suppose if I say border radius, 30 percent, you can pass percentage, although this 30 percent
‫will be about our width and height.
‫So if I say save now, you can see it's equal on all this height.
‫Why?
‫Because Steve, with this 200 pixel and high disk, 200 pixel so horizontal and vertical is equal at
‫this point of time.
‫Let me try to increase this and see maybe 400 by 400 pixel and save this one.
‫I think this should be much better.
‫Let me also try to decrease this to 70.
‫OK.
‫So you can see the scope is exact on all these side.
‫Now, if by any chance, if I increase the height by four 50, that means 50 and decrease this with
‫my hundred.
‫So this is 300, this is 450.
‫And if I save this one, you can see this is now changed.
‫This is not equal.
‫This 30 percent will depend on weight as well as height also.
‫Let me repeat itself again.
‫Go back to our changes.
‫Save this one at this point of time.
‫This depends on width and height, since both are equal.
‫That means 30 percent will be 30 percent of this.
‫This is one 20.
‫Brexit are border areas, but if both of these values are changed.
‫Let's say I read this 300 pixel an hour hiatus, 450 pixel, then 30 pixel will be calculated according
‫to both horizontal and according to both horizontal as well as vertical bar.
‫OK, let me get back to my inside.
‫So that means if I'm baking 30 percent, it's equal since our size is equal currently.
‫So we are dependent on this each, and this 30 percent means the distance from this point to our core.
‫So this is 30 percent.
‫This is 30 percent same polos for this and this.
‫And if I take both as equal, maybe 400 by 400, save this one.
‫So if you see this is 30 percent, that means 120 pixel same values with this.
‫Now, if I get back to my guide.
‫Now, suppose currently we apply 30 percent, that means all the values are equal.
‫If we change this values, if we change value for this side, this side, this side and this side,
‫the global change.
‫So if I jump here with four different values, you can see this side, this side, this side in the
‫slightest change.
‫If you remember, we already took this for values, but things get tricky as soon as we define different
‫values.
‫For each individual part, that means that's what the goal bar and this horizontal bar.
‫Because when this is different, when our weight and height is different, this horizontal length and
‫this word length will be different because this is 400 bricks and this is 300 bucks.
‫So 30 percent of 400 pixel will be different and 30 percent for 300 pixel will be different.
‫So this land will be different and this land will be different.
‫And that's where this horizontal radius value and vertical radius value content of Badger.
‫So if you see now we are measuring these two different value.
‫This is a this is B, this is a this is B, and we can pass these to value differently with the help
‫of Slash.
‫I hope you got the idea.
‫Now, if I scroll down a bit, you can see we can pass all values differently for all corners.
‫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
‫or search, since this is an advanced concept.
‫There will be certain tools that will help you.
‫But here we can utilize the slash and pass different values for all different horizontal and vertical
‫go.
‫But for now, let me pass this light and pass two values.
‫Now let me take 10 percent and 40 percent.
‫So if you look at this example here, if you imagine a line, so this spot is 10 percent and this bag
‫is 40 percent, and this is the change where it's happening now.
‫At this point of time, we are passing the same values for this corner, this corner to this corner
‫and this corner.
‫But suppose if I want to pass for values, one value for this, this, this, this, that means we need
‫to pass four different values.
‫So at this point of time, we are passing these two values 10 and 40.
‫But if we want to pass for values, that means this being this property, this blue theme and this yellow
‫beam, we need to utilize this whole format.
‫Now you don't need to remember this, but before that, let me jump on to a tool that will help you
‫a lot.
‫So this is a brilliant tool known as Fancy Border Radius.
‫Now, head, if you want to design any type of content, you can just crawl these type of output and
‫how you will get a value, whatever the important thing is to understand how these values work.
‫You can jump onto the stool, copied this one and directly add the value here.
‫And if I just show you the example, if I save this one, you can see we gotta share my exact shape
‫that we have defined here.
‫I hope you got the idea.
‫Now what the Israelis do is if you look again, they have this idea that if it is 70 percent, that
‫means is going to cover this 70 percent, if be 30 percent, that means B is going to cover the remaining
‫30 percent.
‫That is what happened here.
‫Sixty nine plus 31, it's hundred percent.
‫So if I say this, OK, this so this is going to be here 17 percent and this is going to be the eighty
‫three percent.
‫So after Slash, we are covering the vertical part.
‫So this is going to be the E part, which is this.
‫So if I say, if I decrease this, you can see this is changing.
‫So if I need this ship, that means it and this is going to be B, then this is going to be the bottom
‫values.
‫Now here we have C and with the sea here, be here.
‫So if you observe 60 or 70 percent a sea and 33 percent is the if I change this one, you can see this
‫is 22 percent.
‫This is going to be 78 percent.
‫I hope you got the idea.
‫So this is what isn't clear.
‫Now we have this vertical layer, which is after slash 30 percent is here and 70 percent is here.
‫So if you observe.
‫This is me, and this is H, e and H.
‫Now, similarly, we have this one, which is seventy three percent and this is 27 percent.
‫If you see I change this one, you get the idea.
‫I hope you got the idea how these are working.
‫You don't need to remember them.
‫And if I save this one, you can see the shape.
‫So that's how you can create crazy shapes with this border radius.
‫I hope you remember about this concept.
‫You don't need to remember this exact position.
‫Once you understand this, things will be easier for you.
‫Now, one other thing, which is about the short values.
‫So if you observe had.
‫If I remove this one for 19, 20 percent, it is going to work great, that means all tired.
‫But if I were to pass two values, maybe 20 percent and 50 percent save this one.
‫Now what happened is this is going to be top left and bottom right.
‫And this where live is going to be top right as well as bottom left.
‫That's it, so I hope this lecture was helpful.
‫Make sure to utilize this resource to design this crazy border radius and also you can change the background
‫and control a lot of thing.
‫Thank you for following, and I see you guys in the next one.