FREELessons: 10Length: 34 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.8 Multiple Borders

In this lesson, you will learn a trick that will allow you to add multiple borders to a single HTML element using only CSS.

Relevant Links

2.8 Multiple Borders

Hello, and welcome back. In this lesson I wanna take a look at how we can create multiple boarders for an element in HTML using only CSS. So you can find the URL for our starting pin in our course notes. Once you open that up, click on Fork to open a new copy and we'll start there. So we have our container, we've seen set up before. We have a container which at the moment doesn't have a border on it, but that's the first thing we're gonna do, so let's jump into that container and I'm gonna give it a 2 pixel border, solid and then let's just make it a kind of a medium dark grey color. And so that gives us our first basic border around the edges. Might even lighten that up a little bit more, let's bring it up to 888. And there we go. That looks decent. And then now what we wanna do is to place a second border around it. And since you can only place a single border around any given element, we're going to have to create a new element in order to do that. But we're not gonna create a new element in HTML, we're simply going to use the after pseudo-class for our container element. So down here at the bottom, we're gonna point to .container::after. And the first thing I wanna do here, because it's easy to forget is to place our content. And our content is just an empty string with a space in it. That's easy to forget so make sure you do that. Now what I want to do, remember when you use the after pseudo element, this is basically placing this new element inside its container, which happens to be this element with a class of container. But it's creating a new element inside that container and so since it's inside that container, if we give the container itself a position of relative and then give the after pseudo element inside that container a position of absolute, then we can position that after pseudo element within that container. And so instead of setting the width and height for this pseudo element, I wanna set the top left right and bottom positions and that way, no matter how wide or tall the container is, this pseudo element will size itself appropriately, so if we set our top position here, to let's say, negative 5 pixels, and then we'll do the same thing for bottom left, and right. So I'm just gonna copy that negative 5, we'll go the next line, we'll do bottom, paste, left, paste, then right. So by setting all of these to negative five I've created an element that's a little bit taller and a little bit wider than our container. And I can prove that to you by temporarily setting the background to red. And there we go. So we have a couple of options here. One thing we can do is we can set the z-index here to -1 and that will put the red behind our container. And when we do that, we already have what looks like a couple of borders. And then if we add a border to this after element, we'll have an extra border, we'll have a third border. So we can set our border here to maybe 2 pixels solid yellow. I realize these colors are hideous, but I'm just trying to illustrate a point here. Now we have three borders on this element, and one of those borders is actually just the red background color. Of that after pseudo-element. And as you can imagine, you can add even more borders if you do the same thing using the before pseudo-element, but we're not gonna do that here. What I want to do here is something that's a little bit different. I'm gonna take away the red background. So it's kind of see through. And that's another option we have if we change this to white and maybe spread this out a little bit more, make it negative seven instead of negative five. And that gives us a little more space in between and now we have kind of a space in between our two borders, but another thing we can do here is we can create kind of a inset border and let me show you what I mean by that. I'm gonna take away this Z index of negative one because this is gonna need to be on top of the other element. And then I'm gonna go into our top, bottom, left and right and change those to a value of positive five. And by doing that we're gonna create an element that's smaller. And I didn't mean to change that on our border. We've created an element that's actually smaller than our container. But since our border color is the same color as our background we can't see it. So let's change that border color to a value of #d2d4fa. And then I do wanna make that a little thicker. That's not quite thick enough. Let's bring it up to maybe six pixels. And there we go. So now Now we have an inset border in addition to the outer border of our container element. So that's how you can create an element with multiple borders on it using CSS. Thank you for watching, and I'll see you in the next video.

Back to the top