How to make a box in HTML CSS (2 methods)

You can make a box in HTML CSS using a couple of ways. Such as border, background-color, etc. In this post, I will create different types of boxes using only HTML & CSS.

Let’s get started.

Example 1: Make a box using the CSS border

In this example, I will create a box for an empty div (class). See the final output below.

For the above box, I have an empty div with .box class.

HTML

<div class="box"></div>

And I wrote the following CSS to create the box.

CSS

.box {
  width: 400px;
  height: 300px;
  border: 2px solid #222;
}

I took a fixed width and height but you can replace these values to meet your unique needs.

If you need to center-align the above box, add auto margin from the left and right side.

Example 2: Create a box using CSS background-color

Before I explain the CSS, see the final output first.

In this example, I have the following HTML.

HTML

<div class="box-outer">
	<div class="box-inner"></div>
</div>

And I wrote the following CSS.

CSS

.box-outer {
  width: 400px;
  height: 400px;
  margin: 10px;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-outer .box-inner {
  width: 396px;
  height: 396px;
  background-color: #FFFFFF;
}

That means I have a semi-black (#222) background-color for the first wrapper div (.box-outer). It has a 400px width and height.

And in this semi-black space, I also have taken another div that is 396px in width & height. Because my aim is to create a 2px border surrounding the box.

You need to center-align the .box-inner div. Otherwise, the top & left borders won’t be visible.

To center align the .box-inner, I used Flexbox in the above CSS. The justify-content: center will make the second box horizontally centered according to the first box. And the align-items: center will do the same for vertical alignment. You can learn more about Flexbox in another post.

Not to mention, in this example, the above box is left aligned. But if you want to make it center aligned, you have to wrap these two divs within another container div. And align (center) the container div as I did in this example.

Build HTML CSS projects

Conclusion

The best approach to make a box using the CSS border property. It also depends on the context and where you need to create the box.

However, the content, margin, padding, and border may make changes to the box. To learn more about them, see the CSS box model.