Borders - CSS Tutorial

- [Instructor] There are some styles that are related to how you add borders to items in Tailwinds. There's quite a few of them. So for example, we can control the width of the borders by using the keyword border, and then one of these different sides, T R B L. I always remember that by thinking of the word trouble. And that actually means top, right, bottom, left. And then you can specify an amount. There aren't a lot of border sizes here. So you can go from zero to eight. There's no one. That's because if you just use the keyword border that will be a one-pixel border. So remember that. So let's take a look at how this works, and we'll click on this button right here to look at the example. And so there's a few other options, but I just gave you kind of the main ones right here, and you can play around with the different sizes. So, if we take a look at the borders right here, then you could see that you could specify border L, actually that's not going to make any sense because it's not going to show it. So you could say border L-2 here, and that would put the border only on the left-hand side and make it two pixels wide if you wanted to do that. And remember that if we just say border it actually creates the one-pixel border that you see right here. So we could go, I think border L, I don't know if we have to put a number. Yeah, and it just makes the one-pixel border on the left-hand side. So T R B L, they're pretty flexible. I like that there are simple borders. And honestly I don't know that I'd use anything thicker than the eight-pixel border but I feel like I wouldn't mind having a couple of sizes in addition to these. Remember that there's however five, not four. There's two, one, and you can make an extra one just with border. All right. So in addition to that you can also control the border opacity. And again, this is pretty handy just the border opacity not touching the opacity of the text or the background. You have the same sort of numbers that you get for text opacity with some extra numbers at the beginning and at the end. And I've placed them all in line here. So you could see it's just the opacity of the border. It doesn't control the opacity of the text which is a hundred percent in all these instances. And you can see here that you can specify any of those opacities. So it's super cool because you can do a lot in a single place without having to create extra spans to control, like say just the color of the text or the color of the background, the color of the border. You can do everything in the same sort of area which it's actually also pretty cool for when you're making components with few JS or React. So let's keep on going. We also have of course border color, and here you get the traditional colors, you know, transparent, black, white and then any of the other colors. And then the strength. I actually do have a tried button for this one. Just to show you the main colors here. They're all at 500. Notice that like what I say 500 for a yellow is always a little bit too orange for me. So if I really wanted to make that yellow I would set it to border yellow 300, and that looks like a nice looking yellow to me. And then you can use any of the other numbers that you want to in here. Then we also have border radius. Sometimes the names or the titles that the page gets is border radius, but then that class is actually called round it. And this one has a side parameter, but because you're talking about corners, you actually get a few extra keywords here. So you have the traditional T R B L, but then you have top left, top right, bottom right, bottom left, in addition to all of the normal ones. And then the amounts can be any of these sizes that you see right here. None, full, small, medium, large, XL, two XL and three XL. So you get a few more sort of roundness. We have this one called the full in here that we can use and full just makes the border radius like 9,999 units which is pretty much a circle. No matter what size your border is. They also actually have a three XL in here and you can see that I've actually added the sizes in here as well. And I mean, these are all the sizes. I think, I don't know, I feel like maybe this one looks good to me. This one's way too slight, but somewhere between these two are probably what I would use. Sometimes I do want it to have circular kind of borders. So I would use the full parameter there. Finally there is something called border style. There's just a handful of them. So you have none, which is the reset and then solid, dash, dotted and double. And you really just have to look at those to appreciate what they look like. I used the dashed or the dotted quite a bit as a border style. These are just CSS options here. And you can see that all I'm doing is adding border and then the name in each one of these. Now do note that in order to use this border double, which is this one right here, you really need a size of at least four. If we try to use two you wouldn't be able to see the hole in between the outlines. So that needs at least a border of four. And of course you can also use eight if you want to.