new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

You can use borders to add some style to one or more sides of an element's boundary.

In this video, we’ll talk about:

  1. ‍The four sides of a border
  2. ‍Border style, width, and color
  3. ‍Border stylings in different states
Clone this projectDownload project assetsDownload lesson assets

Transcript

Borders can define edges or create outlines on one or more sides of an element's boundary. Borders also take up space, expanding the dimensions of an element, or in the case of elements with defined dimensions, they'll push against the content inside.

There are 27 different topics to cover with Borders, but we're going to focus on three:

Sides, style and width, and of course: color.

Let's start with sides.

Here's a div block in a section.

And we have it selected right now so we can see how adding a solid Border looks — and how its width can affect other content.

Now at any time, we can clear our Border properties by clicking to remove here, or of course, we can just hold Option or Alt and press on the blue indicator.

We also have the option of styling individual sides. So if we create and style a Border on the top, that only affects the top.

If we create and style a Border on the left side, that only affects the left.

Or, if we do decide to style all sides concurrently, then we switch to style only one of the sides? This will separate the settings for each side.

That's Border sides.

Let's look deeper into Border style and width.

And even if you've created the most beautiful Border in the world, and your style is set to None, none of the other properties matter.

So we have solid, which lets us add a solid Border — and the width determines the thickness of that Border.

We also have the dashed style. And tweaking the width on this reveals that the dash size and the spacing relates to our value here.

And then there's the dotted style. These are rounded dots which run along the perimeter of our selected element.

Those are our styles and widths.

Finally, we have color.

And to demonstrate this, we're going to set a Border on all sides, and we'll increase its width so we can see what's going on. Now we can go down to select a color and an opacity.

What's really great about how these Borders are rendered, is that if we change one of these sides, the difference — the intersection gives us a bevel or picture frame effect.

For now, let's go with a more traditional, simple Border around our element. And then let's take it a step further by modifying our Border in the Hover state.

And when we make changes, as we know, they'll show up on hover.

We can even smooth this out. Back to our None (or normal) state, we can add a transition. In this case, we'll want to affect Border styles, so we'll select that. 200 milliseconds is great. Now if we demo this, the change fades just as we'd expect. Even though we're demonstrating a color change, this transition will work for all Border properties.

But that's setting Border color.

Now this is an opportunity to show off something that happens that doesn't look so great.

Hover over something and everything around it seems to push. Or jiggle. Or fidget. Or other verbs.

What's happening here is we have styled the Border in the Hover state but we didn't set a style to the None (or normal) state. And so on hover, there's this 1px Border that's increasing the overall area of our button. And it's affecting the surrounding content. So it's always helpful to keep that in mind, so you can evenly apply Borders and Border widths across the various states.

That is Borders.

And this has been Border.