How to make a box in HTML CSS

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.

box made with css border

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


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

And I wrote the following CSS to create the box.


.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.

box made with background color

In this example, I have the following HTML.


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

And I wrote the following 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.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview


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.