How to Make a Square with CSS

Learn how to create a perfect square with CSS in seconds. Below are two reliable methods, fixed-size and responsive, plus easy ways to center content inside.

Live Preview: Square

Method 1: Fixed-Size Square

.square {
  width: 130px;
  height: 130px;
  background: #cd5454;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.square {
  width: 130px;
  height: 130px;
  background: #cd5454;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Method 2: Responsive Square (Using aspect-ratio)

.square {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  background: #cd5454;
}

.square {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  background: #cd5454;
}

How This Works

A square is simply an element with equal width and height. Method 1 sets explicit pixel values to guarantee a fixed, predictable size.

Method 2 uses aspect-ratio: 1 / 1 to maintain a perfect square as the element scales, making it fluid within responsive layouts.

How to Center Content Inside a Square

The easiest way is to use Flexbox or Grid on the square so any child element is perfectly centered.

Method 1: Use CSS Flexbox

.square {
  width: 130px;
  height: 130px;
  background: #cd5454;
  display: flex;
  justify-content: center;
  align-items: center;
}

.square {
  width: 130px;
  height: 130px;
  background: #cd5454;
  display: flex;
  justify-content: center;
  align-items: center;
}

Method 2: Use CSS Grid

.square {
  width: 130px;
  height: 130px;
  background: #cd5454;
  display: grid;
  place-items: center;
}

.square {
  width: 130px;
  height: 130px;
  background: #cd5454;
  display: grid;
  place-items: center;
}

When to Use Each Shape Method

Use the fixed-size method for icons, buttons, or components that must remain a specific size. Choose the aspect-ratio method for responsive cards, galleries, and layouts where the square should fluidly scale with its container.

Quick Customizations

Change the color by updating background: #cd5454; to any hex or CSS color. Add a border with border: 2px solid #333; or soften edges using border-radius: 8px; for rounded corners.

Accessibility & SEO

If the square contains meaningful content, ensure sufficient color contrast and use semantic HTML (like a button or link) with clear, descriptive text.