Double Border Corners

[00:00:00]
>> So, the next thing we need to focus on are the so-called double border corners. Ooh, cool, right? So, this is this little detail right here. You see how just the corners have a border on them? This little corner sort of effect that's going on. We have that both on the magenta line box and we have it on the album box down here.

[00:00:28]
This is the two spots where we are using that double border corner. What do people think about that? How do we make that happen? Anybody has any ideas at all?
>> So you would take your container
>> Yeah.
>> And apply the borders to before and after pseudo elements.

[00:00:49]
And because there are four here, you just have to grab one of the child, components and do the same thing.
>> There you go. If you understood what he said, he's actually got the right answer here. So I will show you here, what we've got going on. The first thing I did to start this was I googled it, because that's what you do.

[00:01:08]
You go Google for double border corners CSS and I wound up with this post here on Stack Overflow, always a great place to look. And it turns out they had a bunch of different solutions for this. I could not believe how many solutions they came up with that produce double border corners.

[00:01:26]
And you can produce all kinds of wacky, different kinds of double border corners. So there you can make far more interesting ones than the ones that our designer has called for. Here's a way you can do it with SVGs, so on and so forth. But the methodology that I like the best is the one that Jason described for this.

[00:01:45]
Feel free to dig into Stack Overflow and check out all these other ways of doing this. Maybe it'll inspire you for your next design. But here I have aJSFiddle that's responsible for sort of inspiring this approach. JSFiddle is very much like CodePen. It's more oriented towards the JavaScript developer community.

[00:02:07]
So you can see kind of here what's going on. Here we have a div with an ID of content. Inside of that, we have a paragraph, super simple. Then what we're going to do is we work with content before. So the before and after associated with that div of content makes sense that forms two boxes and then the paragraph inside of that, it also has a before and after, right?

[00:02:37]
So that gives us four little boxes that we can work with, right? Gives us four sides, then what we're going to do is use positioning to move those boxes to the corners of the main box and turn on the borders just for those little bits of code. That's sort of broadly the direction we're going in.

[00:02:56]
So you're ready, we're gonna write some code for this Make sense? Everybody okay?
>> Sorry, can you remind me what the before and after actually
>> What before and after actually do? Okay, so remember every HTML element has a box around it, right?
>> Yeah.
>> We know that cuz we have a border and we have margin and we have padding, all that kind of thing.

[00:03:21]
Every HTML element has that. And when we work with just HTML and CSS, usually that's all we access. Is that so-called node, that's the program, return that node in the HTML. But in fact there is space before that and after that node. And we can access those with the sudo element before and after.

[00:03:44]
And that gives us the ability to put things before something or things after it. Make sense? We've actually used a little bit of before and after elsewhere here in our code so far, but now we're really digging into how before and after work, okay? So let us take a look then at our CodePen.

[00:04:07]
We'll start with our beginning CodePen for this section Okay, so fold all this up and get it ready. Nice reviews. The lbum is the layer that we're working with. We don't need the footer, we don't need the media da da, da, da, da, da da, okay. So we don't need either side.

[00:04:41]
Okay, so our two boxes have a class of album associated with them. That is what we're gonna use, we're gonna use that class of album and we're going to use their first child. So it actually happens to be the same for both of them, which is this h2 that shows up here, right?

[00:05:00]
So there's an h2 that shows up at the start of one box. There's an h2 that start shows up at the start of the other box. Make sense? Okay, so now we can start writing our code here. So the first thing that I'm going to do Is on my album style, I am going to add to this position relative.

[00:05:25]
Guess why I'm adding that. Do you remember earlier where we talked about relative and absolute positioning? We said it will go all the way on up looking for the the next element inside of all that nested HTML that doesn't have a position of static, has know sticky, fixed, absolute, relative, right, it's looking for it.

[00:05:51]
Relative is the one that we usually use for this, because it doesn't do anything by itself. As you can see, nothing has changed. Whereas sticky or fixed would definitely change something. And absolute often changes things as well, right? Makes sense, okay? So we want everything to be relative to that album item, which is of course the cyan border that you see here.

[00:06:15]
You can read that right there in the code. Makes sense? Okay, so then we are going to write the following whacked out code. So we're gonna say .album.before, okay? So that's our selector. Notice that it has a double colon. Sometimes you'll see this written with one colon, and that just has to do with, one colon was part of CSS2.

[00:06:43]
Sudo-elements and sudo-classes both had the same colon. And everybody got confused as to which was a sudo-class and which was a sudo-element. So in CSS3, they turned sudo-elements into double colons. So you'll see it written both ways, and I like to do the double colon cuz it reminds you that it's a sudo-element, all right?

[00:07:12]
So, album:::before, .album::.album. And then, we're going to say, the immediate colon first-child::before. Whoa!, having fun yet? What does that mean?
>> Before the first-child of the album.
>> Yes, so before whatever that first-child is a direct descendant of album, so we don't know what that first child is gonna be.

[00:07:55]
In our case, we've actually got h2 both times, we could just say h2 before. But this is a more generic way of writing it, so now you can take the style and apply it to any other web page that you build. Make sense? Okay, and then we're gonna write that one more time, and we're gonna say after.

[00:08:13]
So now we have four boxes. After, there we go. And how do I know we have four boxes? Well, I'll show you, if I say the width is 40 pixels, the height is 40 pixels. And I put in a border, two pixels solid var, Cyan. We might start to see them.

[00:08:52]
>> You need a declare block.
>> Declare a block, is that what I've left off?
>> Yeah.
>> Okay, Splay block.
>> And your content, I'm sorry.
>> And my content. Because it requires content for it to show up here on the page.
>> I don't know if the foreign after are inline or blocked by default.

[00:09:21]
>> That actually does isn't needed. Okay, I'll leave it for now we'll see what happens. So you see what's happening here, we have this block here, this block here, okay? Those are coming from album, that's before and after associated with album. We've now turned them into little blocks and given them four borders, okay?

[00:09:50]
And inside of this, we have this is actually a block, it's not splitting as such, but trust me, it's a block. And this one over here is another block that's associated with the h2, which is the first-child of the album. Makes sense, okay?
>> So HTML is kind of throwing in three blocks for the price of one with every element.

[00:10:10]
Exactly, just if you need them, you can style them. You can change content with them ,sometimes people change content with them. You can include, we used them earlier to include the Hamburger button on the page, that kind of stuff.
>> As long as the HTML element can contain something inside of it, so it doesn't work for inputs.

[00:10:33]
Well, unfortunately some inputs do work like range doesn't work for image. So it's kind of a hit or miss.
>> Yeah, exactly. Okay, so now what I'm gonna do, I'm going to set my position to absolute, because we definitely don't want these boxes there, we're going to have to move them around in space, okay?

[00:10:57]
And they're gonna look weird here for a while, just sort of ignore what they're doing, we have a lot of stuff to type in. So we've got our position of absolute, we've got our width and height which controls the size of the corners. Now, I put in the border 2 pixel solid var(--cyan) here, so that you could see that those boxes existed.

[00:11:16]
I'm now gonna take that out, and I'm going to change this to the border color is var(cyan). Remember, border itself is shorthand, it contains three properties. It contains a width, it contains a color, right, and it contains a style. So I'm sort of breaking these out individually now.

[00:11:37]
So I'm saying that I want cyan borders and I want the border style to be solid. Now why would I do this? I'm leaving out the width, right? Why would I do this?
>> You want different widths depending on what side of the box it is.
>> I may want different widths depending on what side of the box it is.

[00:11:58]
And ultimately with these boxes, what am I gonna do?
>> I only want part of the box.
>> I only want part of the box, I'm only gonna turn on two of the four borders, right? And I'm gonna control that through my border width property. Okay, so always I want it to be cyan and I want it to be solid.

[00:12:17]
But I can say by using my border width property I can control exactly where it's gonna show up, make sense? Awesome, okay? And let's see, then we want a little bit of margin ultimately again it's not really gonna show much here right now. But we want a little bit of margin between these inner boxes and the album, right?

[00:12:40]
So we have a little bit of space to see the double corner, makes sense? So we're gonna say margin 0.25 rim, Okay, So now, for each of the individual boxes, we can get specific about it. So we'll start with .album::before. And what we're gonna say here about before is now we use those top left right bottom properties to position it in space.

[00:13:13]
So we're gonna tell this one to go to top 0, right: 0, See I went on over there to that corner. And now we can say we want our border width to be 1px, 1px, 0 0, or 2 pixels, right? Sort of depends on what effect you're looking for.

[00:13:42]
Top right, bottom left. So there's top and right, makes sense? How cool is that?
>> That's cool.
>> That is a pretty awesome little trick. Smoking hot, right? And it's happening down here on the other box as well, right, cuz we're putting this on our album class. So now anything with that album class will wind up with these double border corners.

[00:14:03]
Okay, so we're gonna continue on here, copy that style, and we'll put it down here. And we're gonna change this to album::after and it will have a bottom of 0 and it will have a right of 0. And this time it the border wits will be 0 2 pixels, 2pixels 0.

[00:14:31]
So that pushes that border down to the lower right hand corner. Now we'll do our next one. .album greater than :first-child::before, whew! What a selector. So this one will have similar kind of values here. And we're going to have it say bottom 0, Right, 0. I know what I did, this one should be top right.

[00:15:14]
There we go, top right and the other one is bottom right. It probably doesn't really matter what order you do these in except, you know what? Let's just leave it, we'll make this one the top. And this will be?
>> Top left to 2 0 0, right? Did it work?

[00:15:37]
>> That's the same as the first one now.
>> That's the same as the first one. It is, yep, okay? Good i, bottom left, that's what I need bottom Left. Did it go? Yeah, there it is. And now we need 0 0 2 2, right? There we go.

[00:16:09]
And then our last one, .album > :first-child::after. And this will be our, what are we missing?
>> Top left.
>> Top left, Top left, and this will be 2 0 0 2. Sweet, how cool is that? Okay, so what if we want those borders longer? What could we do to make them longer or shorter?

[00:16:54]
What would we do?
>> Change the size.
>> Change the size, right? Do they have to be the same size? Do they have to both be 40 pixels or whatever, 20 pixels, 60 pixels? No, we could make them different sizes, right? We could make one that's 4 pixels wide and and 40 pixels high, right?

[00:17:15]
I don't know why you do that, but you could, right? Now here we've got little lines over here on the side instead. So you could change the color, right? So you could have one border that's one color and one border that's the other color, right? You could admit, change the styles in all those corners.

[00:17:35]
You could round them. There are so many things you could do. Yeah, okay? So this is just setting you up with a nice little chunk of code here that you can now take and adapt to all kinds of other designs, yeah? Super fun. Yes.
>> I just wanna make sure I understand.

[00:17:55]
So you're using the first-child before and after just to get two more boxes
>> Just to get two more boxes
>> You could do the second-child and I'd work the same
>> You could potentially do the second child and so forth. But as Jason was saying, in order for this to trick to work at all, Well, the album box itself has to have some content.

[00:18:16]
So there's always gonna be a first-child.
>> I see.
>> We don't know if there will ever be a second child. [LAUGH] So that's why we set it up this way. That's a great question, I'm glad you asked that.