‫Hey, there.
‫Welcome back.
‫On the side.
‫Now let's move on to some Erdogan's concept.
‫We will be discussing about border in-depth now so in-depth that there are chances that you might understand
‫some concept.
‫There are chances that you might skip them.
‫So what do you have to do is just we watched this lecture and try to replicate everything that we are
‫doing.
‫Also, make sure to read about the resources that I am providing currently because this is some serious
‫advanced topic.
‫You don't utilize this on a regular day-to-day basis.
‫This is something that you try to make things creative or try when you are implementing something at
‫the advanced level.
‫So make sure you can skip this if you want.
‫OK, what we are doing is we are discussing about borders, borders as well as border areas.
‫Same thing I did just created our Dave, and I'm working with my style success.
‫Remember, I took red and white for this, Dave added some margin, so we have some space.
‫And I read this default color by chance, if they use any text and then we have this border five pixel
‫solid blue.
‫Now here you can see this border is looking fine.
‫Great.
‫Let me try to increase to 50 percent.
‫Save this one.
‫OK, so our border is looking fine.
‫Mark, how do utilize this border to change the shape of our current do or any type of other element?
‫When you are working that 16 hour chances that you want, the designs are to ensure there are chances
‫that you want to customize this particular do.
‫And that's where this whole border thing comes into picture and help us define the shape of different
‫elements or just design a new shape.
‫For example, at this point of time, we are utilizing this border.
‫Now this 50 pixel means 50 percent of our top right bottom as well as left, but we can utilize individual
‫values also.
‫Bill now we have been utilizing single value for all our borders, and in most of the cases, you are
‫going to utilize this single value only.
‫But if you want, you can customize all this border.
‫So for now, I am commenting this one.
‫And here we are going to play with custom top or bottom left as well as right.
‫So all you have to do is use border and then you have option for top head.
‫I'm going to take 50 picks and right now for all of them.
‫Going to utilize this one.
‫But I'm going to try a different color.
‫Let's say I'm going to take blue hair or I should say I can change things.
‫Or maybe.
‫Let me go red light blue hair and see now how you can see we only have this stop.
‫OK.
‫This looks great, but I can utilize different other, but maybe if I need border bottom.
‫Now, had I can do something similar, I can utilize the 50 work and I can change the colors, so here
‫I just need to go with maybe this green type and save this one.
‫Hey, you can see I have to bottom.
‫This looks fine than now, but let us try to utilize the other part.
‫Maybe.
‫Left and then we can utilize the same value.
‫But make sure to change the alert to understand the difference.
‫Save and how you see the change here, you see how they are distributing content between these two border.
‫Let me try to add the border right as well.
‫So let me copy this one and simply add the right part.
‫Let me try to take a different color, maybe some around Reddish being something like this.
‫And save this one now here you can see we have four different borders.
‫Top, bottom left and right now, remember how they are distributing when we are utilizing the border
‫together, they are distributing them from the middle.
‫Now, at this point of time, I took our word of 200 by 200 and I'm utilizing border walks.
‫That means if I increase my border, my content will shrink.
‫So if I say my content as 100 bricks in itself.
‫And since I don't have any content, you can see how they are going to walk.
‫Now I can utilize this custom border and can draw any type of shape.
‫Maybe if I say transparent to all of them and just keyboard allow for live, I will get some type of
‫triangle.
‫Or maybe if I just keep the border color off bottom and remove all of them.
‫That means if I say this is transparent.
‫Maybe that's one as well as this one, as well as this one.
‫And if I save this one, you can see I got the shape of a triangle and I can do something similar.
‫Maybe I keep this left to one and remove the bottom.
‫Save this one.
‫You can see I get a new type of shape.
‫Now, this is tricky because we can control a lot of things with this border.
‫For example, if I said maybe at a Howard effect, whether there.
‫And as soon as we hover over this border, let me try to.
‫Change it, maybe let me try to move this to right and Jane, this to trans bank changes to transfer
‫and save this one.
‫Now, if I try to hover over this, you can see there are defined in a particular shape.
‫Now we can utilize this border as well as border radius to do a lot of other custom things.
‫I hope you got the idea about border.
‫Now if I just remove this and also change the color of border, right?
‫Save this one.
‫You can see we got to differentiate.
‫Maybe if I just go at top and bottom, I can get different shapes.
‫Now this is important and we can create multiple shape according to multiple requirements.
‫And this works brilliant once you start implementing and start understanding these creative things.
‫Now remember on day-to-day level on your random freelancing project or maybe a company project, chances
‫are you are not going to utilize all of them.
‫Baidu databases.
‫They have their own specific use cases.
‫So I hope you got the basic idea about this storm bottom left and right now.
‫Let me comment all of this and understand about how to work with border areas.
‫So let me activate this border, not save this one and discuss about border radius because this is going
‫to be important and interesting to MailChimp.
‫So if I just say border radius and our toolbox is, or I should say five boxes, save this one.
‫You can see we have this border areas.
‫Again, remember whenever we take this single value, that means we are providing one value to all the
‫corners, and that's where things get tricky with borders.
‫Remember, with border, we are taking this single value for all of them, but we can pick individual
‫values also.
‫So when border radius we have top left, then we have to operate.
‫Then we have a bottom right and then we have bottom left how we are going to utilize this if we want
‫to create ships.
‫So first thing I'm going to do is I'm going to fill this content space with this same color.
‫So let me add background color and fill this empty space.
‫Now we have this border radius, 15 pixel applied to all the four corners, but we can customize it.
‫We can either pass for individual values.
‫Greens.
‫Let me direct or indirect.
‫So.
‫Let me take four of the Pixel and then Pixel, and if I save this one, you can see it's different.
‫Why?
‫Because we are passing individual values to all four.
‫Let me take AP instead of 20, you can see this is the first one which is top left or right autumn right,
‫as well as bottom left.
‫Now with this, you can control a lot of things.
‫You can create different type of shape.
‫You can also create background lives for different images, and there are several examples that you'll
‫see floating on different type of website, as well as on apps itself.
‫So I hope you got the basic idea how we are going to utilize border areas.
‫Now this is one way to control border radius, bypassing all four values.
‫You can also do one thing.
‫You can take individual values.
‫So if I say border and if I want to just control the border radius of this stop left so I can use border
‫that I can stop left radius and had I can pass maybe 50 pixels, save this one.
‫So you can see all three of them are untouched, but this one is it.
‫Similarly, we can control the other three as well.
‫So let me add it here in the comment Excel, so I hope you got the idea how you can control these multiple
‫values.
‫But, but but there is a surprise.
‫What if I say I can design something like?
‫This without a border radius.
‫I hope you like this.
‫This design.
‫So how to do that and what are these values?
‫We are going to understand this in the next one.
‫OK, I'm not leaving any suspense.
‫I really wanted to show this.
‫So you have some interest in the next election itself.
‫So in the next lecture, let us understand how to design different type of shape that we can utilize
‫with backgrounds.
‫I hope this lecture was helpful.
‫Don't worry, we are going to cover this in the next one.
‫Thank you for following, and I see you guys in the next one.