Borders, Outlines, & Rings

[00:00:00]
>> Steve Kinney: So here we've got like a very suspiciously close to the button that I did, even though I was live coding I had before, which is the border, as you saw, shift things. So here's two borders together. They take up different space. Much more obvious. When I hover, my whole layout is shifting with a border.

[00:00:23]
That's no bueno. What I used to do before when I was younger and dumber is just have a border of the same color on the primary button too. And now I'm just changing the color of the border. There's a better way, which is like as we saw just a second ago, to use outlines.

[00:00:41]
Now I can hover over gets the outline, but we don't shift the layout at all. So if you find yourself with a border on something and the layout shifting, you probably wanted an outline in that case. That said, they're all available to you. If it is something where everything has a border, that's fine too.

[00:01:00]
But they do behave differently. That's kind of the same thing. Why do you have two? Well, that's why there is a third as well. We're gonna look at focus states in a second, but a lot of times you will see these. For focus is where you kind of tab over to something, which will be a little bit easier when I get into the storybook.

[00:01:26]
But like that state, I think if I click here and hit tab. Yeah, there you can go. You can do outlines also just for like when you get to keyboard focus and stuff along those lines. We're gonna look at that in itself in a second. Now, the reason why there is a third exists, but not anymore.

[00:01:47]
Let me explain. It used to be and is still true if you are supporting older browsers. That outline had one major drawback, which is it didn't respect border radii, which means if you had a rounded button and you tried to use outline, you would end up with a square outline over a rounded button.

[00:02:10]
I cannot show you that because the browsers support that now and they will round everything. If you are targeting browsers, I could tell you the exact numbers, I probably haven't written down somewhere. But let's just go mid 2023 and later you can just use outline and border all the time and you are good to go if you are supporting older browsers.

[00:02:40]
And there's some other reasons why you might use the other one. One of the ones that break a rule for most of what we're gonna say with Tailwind, it's like it's just normal CSS properties that you're mapping to. Rings theoretically also work the same way, but on older browsers, they will actually create what we're all seeing.

[00:02:56]
In my modern version of Chrome, they are a little bit of a hack, which is it is just a very fancy box shadow that looks like a solid ring around it. Now, right now, if you're targeting modern browsers, it doesn't matter. Just use outline, you're fine. But if you see code where you see ring or you need to target older browsers, you're like, I don't understand the difference.

[00:03:22]
The difference is one's technically a box shadow because one didn't support rounding at one point or another, and now it does. And there are some nice things you can do with rings because there's a box shadow and you're not. Like, outline and border are just things that the browser provides.

[00:03:35]
The fact that it is a box shadow means you can do like multiple rings and stuff along those lines as well. So, yeah, I can do like, kind of like a ring that's got a green ring and then a purple ring around it. Again, none of these look good and you shouldn't do any of them.

[00:03:50]
I was just trying to demonstrate the purpose. But you can kind of stack some of the rings. If you need to do something particularly fancy, rings are still available. We'll go look in the VS code in a second and see what it turns into at some point. You can do all sorts of fun stuff like that.

[00:04:04]
These days, unless you need the fun stuff specifically from a ring, outline and border usually do a trick, but if you c ring, there was a definite reason why it existed at some point. And there are a few nice things that you can do. I even made a little cheat sheet for you.

[00:04:20]
But I'll show you what a ring looks like instead of an outline, just to kind of drive the point home. So if we said ring of one or two, and we said ring, and you can use both at the same time, we say ring-amber, 600. You can see that in this case it is, that's not super helpful.

[00:04:46]
But there we go, putting a box shadow that looks like a ring. Let's go look at what I accidentally did. So now we've got both an outline and we have a ring. And I can do fun stuff because I can stack them where I can say like, the other thing a ring can do can be inset.

[00:05:03]
While an outline can only be on the outside, a border is the border. A ring can also be inset. So I can do something like ring inset. Yeah, and like we have both, so they're kind of stacking. I can also say then, outline. If you do need to do something real fancy cause your designers are having too much fun, we can say that.

[00:05:28]
Here we go. Now it's got a offset of 8. Did I get rid of the outline in general though? Let's see. Now it's got an outline with an offset of 8. It's also got a ring. I can go put a border on there for fun too, if I really wanted to.

[00:05:45]
So if you needed to stack these things up, you could. This is a horrible button. You shouldn't do this. It's like one of those. It's a Jurassic Park thing of like, your scientists were so concerned asking whether they could, they didn’t stop to ask whether they should. But you can stack them.

[00:05:59]
But the TL;DR is, for most kinds of interactive things, we don't want the layout to shift, outline is your friend. Ring still exists if you need it for something very particular, you can most of the time ignore it. If you see it, it existed for a reason, that reason is no longer true.