Border Radius

[00:00:00]
>> Kevin Powell: And even quicker win is border-radius. Have to talk about it. It's been around for a while now. I remember when this happened and this was like one of the most exciting developments in CSS at the time, because before that, round corners involved slicing things up in Photoshop, and they had to be images around the corners, and then we could just do a border-radius and say how big we want the border-radius to be, and we got a round corner.

[00:00:22]
Really, really nice. It is a shorthand, so you can do the same shorthands that we would normally do. Let's just open up the demo and take a look. One value will put the same radius on all four sides. If we have two values, one value, same radius on all sides, two values, it's kind of weird because it starts here and then it goes across, it's diagonally the way it does it. Three values, top, then this one, then this one, and we had like a leftover, so the leftover repeats the opposite corner.

[00:00:59]
And if you do four values, top left, top right, bottom right, bottom left. So we go clockwise again, but we're not starting at the top because we're on a corner. So we start all the way on the corner over here. You can create some interesting shapes with these. I don't know. Oh, I didn't include it. If you look up border radius generator, I thought I included this. I think it's this one. This one I usually do the fancy border-radius.

[00:01:27]
Just so you can get like if ever you need some weird shapes, this is all just being done with border-radius. The syntax looks really weird. I don't want to get into the forward slash, we're setting different radius on both sides. It gets a bit more complicated, but a nice way to create some weird blobby, interesting shapes using border-radius right there. It is a shorthand, so if you only need one, you can say like border-radius, border top left radius, so if you want to, I find most of the time you're just setting it like this and you're good to go, but it does depend on the situation.

[00:02:08]
Now, or actually one other place, one other thing that you will sometimes need to do is only on one side, just because the element's touching something. So let's just do my two value one. So if I only need the border-radius on the bottom, I always use the shorthand, and I'll do 0 0, 50 pixels, 50 pixels. So it's 0 across the top and then my 50 pixels get the bottom ones, and then depending on the sides, you just move the zeros around to get the sides where you want it to be rounded.

[00:02:43]
It's also really good for creating pills and circles. If we come in with you'll usually see if you have a perfect square, you'll see people say you can make a circle, and they're not wrong with border-radius. 50% border-radius of 50% on a perfect square will make a perfect circle, because it's 50% all the way around, you get a circle. Pretty straightforward. The problem with border-radius 50%, or percentages in general, border-radius.

[00:03:15]
If you try it on other shapes, you get ugly shapes. These ellipses, oval things that get created are not very nice. And it's because it's going 50% on this axis and 50% this way, and so you just get this awkward shape. If you use really big numbers instead of percentages, you'll just get a pill. So if I say this is actually like 1000 pixels, it's still going to stay a circle. And if I say this one's 1000 pixels, then instead of that weird shape, I get a nice pill shaped like that.

[00:03:50]
My go to for any time I want something like that is just to use 100 VW. It's a massive number, it's the size of the viewport. I know it's always bigger than what I need, means it's always going to give me a perfect circle, or it's always going to give me a pill without any issues just because it's a ridiculously large number. So it's a quick win to get that type of shape that you need. And the nice thing with that is maybe somebody uploads an image that's not a perfect square, so the, you know, the height ends up being different or something.

[00:04:18]
And then they don't get a weird oval shape. Let's width, we'll give it both, 100 pixels for whatever reason, but you get a pill shape instead of getting a weird oval that you might otherwise get. So, I usually use 100 VW instead of using percentages when I'm using border-radius, if those are the shapes that I need. I have to talk about this, we're talking about modern CSS. This is not ready for production yet, but it's super exciting, which is corner shape.

[00:04:43]
There's a really good article on the Frontend Masters blog by Emmett Sheen on corner shape. It allows us to have squircle, which was the thing everybody wanted, but also a lot more. So it's come down. This is like a nice visualization of a regular border-radius and how it's being calculated. But if we come down further, let's go to a squircle. So squircles are sort of squares that are more rounded.

[00:05:08]
People wanted these for a long time in CSS, so we have them now. So you can see it's like, if this was the round, it's giving us a crazy shape like that, more of an oval. The squircle, it's more of like a square, it's like the YouTube logo almost, right? You're getting like a square rounded off square. I don't know how to describe them. You also get scoops. So we can get inset edges. We can get beveled edges.

[00:05:34]
Notches and square is the default, where you just have a square, so you won't use square. There's also a super ellipse, and you can come in with custom values and do, these are all just like short pens or shortcuts to like custom sizes that you can make. This blog post is really good if you do want to dive into it and explore it more. Let's just hit, there's a randomize on this one, I think. You can create all sorts of crazy different shapes using this.

[00:06:00]
It's kind of wild. Hexagons and, it opened up some doors, but again, browser support, it's just been added to CSS. I think it might be only in Chrome, yeah, pretty exciting, and you can check that out for more information.