This is Sasha and welcomes to another CSS training video and today what I want to do is share with you the CSS border-radius property. We’ll talk about the radius or rounding corners. In that way, you get some insight on how to update your business website. Let’s take a quick look.
What I have is this box with a border of let’s make it 5 pixels, and you can see it’s pretty big right there. We have nice corners. But let’s say you want a border radius. We touched a little bit on this, but you can see there’s a border radius field that you could create and let’s say 20 pixels which are rounding it at 20 pixels.
You can see if I save this, you can see how it’s rounding that out fairly nicely on our border-radius. If I let’s just say 200, it’s only going to round as much as possible, and now you kind of get like that pill button effect even if you go to let’s just say 900 pixels, it’s not going to go any further because it already rounded it as much as it could.
You could try and precisely get it to that point but if you need a border radius that’s all the way rounded as much as possible you could just put in like a value of let’s say 200 in this case of course so every figure or rectangle will be slightly different.
If you want to target just let’s say the top right or the bottom left border, sometimes you want to do that, and it is possible, but of course, the code does get longer. What you need to do is you go border, and then you go radius, and you can see there’s a lot of different variations, so you type in border-top-right-radius, so you have the top right, you have bottom left, you have the top left, bottom right.
I’m going to do let’s say the top right radius right here, and I’ll make it let’s say 15 pixels, okay? You can see this top right is 15 pixels. If I wanted it to let’s say 35 pixels what you can do is make a 35, and you can see what effects, so the top right area is now 35 pixels. If I want the top also left to be 35 pixels, I could go top left radius, and now you can see the top and the left have a radius.
You have this 35 pixels. If I wanted the left side a little more, I could do 95, and that’s a way to get more precise or precision in this effects. You can see how it’s creating like a little button effect with the radius that’s ultimately being created.
You do it this way and to continue along this premise. You would go border-bottom and then you go bottom-left-radius and let’s just say we’ll go 25 pixels and now you can see there’s a little bit of a border-bottom-left-radius and you can see we can create some fascinating shapes with this and then bottom-right-radius which will do let’s say – let’s just say 5, tiny amount.
You can see how this is coming along and being created and as you zoom in and you can look at those radiuses right there. There’s one that’s 10. There’s one on top right would be 25, and ultimately it takes a lot of fields to be able to create this. If you just wanted a radius all around, you could do border-radius which is the typical way. When you create a button, you might say, “Okay.
I want it 25 pixels border-radius, and there we go.” If you wanted like a pill button, let’s say you go 95 and you know you have like a pill button that people would click, so that’s another way of doing it, but that’s how the border-radius property works.
Of course, if you didn’t want it solid, you could also go into the same thing with like dashed border radiuses. Or even if you don’t have any let’s say outline on the border, you could go like this and have a 0 on the border, but the radius itself as you can see also takes into account the roundness factor, right?
I don’t have any border there. But because I do have that radius, it still plays a role in that element, okay? I hope that makes a little more sense and a little bit more information for you on that border-radius property.