Hello, in this CSS Crash Course video, we're going to be looking at rounded corners. So you can create essentially a square or a rectangle using height, width and sort of color properties to activate, say, for it has just squared of corner, but you might want rounded corners, that does look pretty cool. And that's very popular for stuff like buttons. So to do rounded corners really simple. First of all, what you want to do is get rid of any body code that we've got for now. Just put a div in here.

And as usual, you can apply this code to whatever sort of element you want, whether it's based on class and ID to some particular element type. We just don't assign an ID of corner to this corner. So we can say that we go to our index or CSS zoom in a bit. Fine. So what I'm going to do is actually remove all of this code. And in here, I'm going to put hash cornered.

I'm gonna put a height of 500 pixels. These are just arbitrary numbers to actually just visualize what we're doing to rounded corners, where you can design it however you want on a per a mod before a per margin, show you also you why I'm going to put a margin so called background color as red. Save that. And if I refresh my web page, I'll get this sort of red box. So what I want to do is just move this away from basically this side and the top side as well low bit so what I'm going to do is just do margin code on 50 pixels. Save that Refresh.

As you can see, it has now moved away. This was the intended result. So now to actually do a border, I mean a rounded corner is something called a border radius you do border zooming border, radius, colon, and you put a pixel value, you put some sort of value via the greater value, the more rounded the corner it and I'll recommend experiment with this, see how far you can take it. See how low you can get us a great way of learning click File, Save that refresh. We now have rounded corners, briefly show you the difference between a 550 and 100. Save that refresh and you can see the ever slow, slightly rounded now and that's the C 200.

This is extremely rounded, it's probably 150. As you can see, it's even more rounder and this is how You would, you can actually draw a circle like this as well, I believe it's half the value of the width and the height. So yeah, there you go. That's the way you would do a circle, you would just do half the value of the width and the height. It's obviously slightly different if you don't have a square and try putting a rectangle there, see what happens. Still got a bit more for this video to go.

So what I'm gonna do is comment this out, because what this does is targets all four corners, you may only want to target one particular corner, and to target that corner, you would do something like border radius, colon. The first value you can put four different values. You put four different values. First value Toby's top left corner, the first space, the Secondary targets the top right corner. deferred revenue targets the bottom right corner. And the fourth learning targets the bottom left corner.

So basically go from top left, clockwise all the way back to bottom left. So 80 pixels, save that refresh. As you can see, the bottom left and 480 is a lot rounder, and it's slightly game random every single time. So that's another way of doing border radius with rounded corners. But there is actually another way of doing rounded corners. You can do border that's radius.

And you can only you can what you can do specify just two values for the slide 40 pixels and 256 pixels. What this does the first value targets the top left and the bottom right corner AK just opposite corners. And then the second value targets the bottom left and the top right corner. So if we save that what happened is these two corners on the very rounded, they'll probably be, you'll be the same as this. So this particular corner won't change, this corner will become this one, and these two will become very rounded, refreshed. As you can see that it looks quite cool.

It almost looks the way a lemon looks if you look at it from a bird's eye view. Sorry about that. So in here, one final way, they'll show you how to do a border radius, aka a rounded corner for this common descent. For this, you just do border bottom, left, dash, radius, colon specify a value 90 because I think see what you're gonna do is just going to tell you the bottom left corner, you can see all of the corners squared off. And this way it allows you to target just one particular corner, you might just want to tell you one particular corner at a time to how you do it. If you want to do border dash, dash, right, dash left, and they can do border does bottom dash, dash radius as well.

I leave that to you to experiment, experiment with it. Check it out, see how it works. For more information, feel free of W three schools website is always the best one to check out for stuff like this. If you have any questions, feel free to post them on my education platform. So no learning code at UK. There'll be a link with this video for that plus, there will be a link to the GitHub source code page, which will have the source code from every video in this Crash Course series.

If you have any questions, feel free to ask. And as usual, thanks for watching. see in the next video