Border Number Square (Hollow 5×5) in JavaScript

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Border conditions
Border number square output in JavaScript programming

What You’ll Learn

How to print a 5×5 square where only the border is filled with numbers (center cells are blank).

This pattern is great practice for combining multiple conditions with row/column indices.

⭐ Pattern Output

The pattern looks like this:

Output
1  2  3  4  5
16          6
15          7
14          8
13 12 11 10 9
1

Complete JavaScript Program

We detect which border we are on (top, right, bottom, left). If a cell is not on the border, we print blank spacing.

JavaScript
const n = 5;
const cellWidth = 2; // pad to 2 characters

let top = 1;
let right = n + 1;      // 6
let bottom = n * 2 + 3; // 13
let left = n * 3 + 1;   // 16

for (let i = 1; i <= n; i++) {
  let line = "";
  for (let j = 1; j <= n; j++) {
    let v = null;
    if (i === 1) v = top++;                 // top row
    else if (j === n) v = right++;          // right column
    else if (i === n) v = bottom--;         // bottom row (reverse)
    else if (j === 1) v = left--;           // left column (reverse)

    if (v === null) line += " ".repeat(cellWidth + 2); // inner blank space
    else line += String(v).padStart(cellWidth, " ") + " ";
  }
  console.log(line.trimEnd());
}
Try it Yourself

🧠 How It Works

1

Create four counters

We maintain counters for top row, right column, bottom row (reverse), and left column (reverse).

Counters
2

Scan the grid

Nested loops visit every cell \((i, j)\) in a 5×5 grid.

Grid
3

Border detection

We assign a number only if the cell is on the top row, right column, bottom row, or left column.

Condition
4

Inner cells are blanks

If a cell is not on the border, we print spaces to keep the hollow center.

Hollow
=

Border-only square

The border is numbered while the center stays empty.

2

Variation — Browser (aligned cells) Version

In the browser, use inline-block cells for alignment (and blanks for center cells):

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var n = 5;
var top = 1;
var right = n + 1;
var bottom = n * 2 + 3;
var left = n * 3 + 1;

for (var i = 1; i <= n; i++) {
  for (var j = 1; j <= n; j++) {
    var v = null;
    if (i === 1) v = top++;
    else if (j === n) v = right++;
    else if (i === n) v = bottom--;
    else if (j === 1) v = left--;

    if (v === null)
      document.write('<span style="display:inline-block;width:3em">&nbsp;</span>');
    else
      document.write('<span style="display:inline-block;width:3em;text-align:right">' + v + '</span>');
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Change n to build a larger hollow square
  • Fill the center with a different character (like 0)
  • Compute border values by formula instead of using counters
  • Add colors for each border segment in browser mode

Avoid

  • Printing inner blanks without fixed width (alignment breaks)
  • Forgetting that bottom and left borders are printed in reverse
  • Mixing 0-based and 1-based indices without adjusting formulas

Key Takeaways

1

Border-only printing uses simple row/col conditions.

2

Counters help assign sequential values to different borders.

3

Fixed-width output is key for a clean hollow center.

4

This idea generalizes to many border and frame patterns.

❓ Frequently Asked Questions

Those are the remaining border numbers after printing the top, right, and bottom. They fill the left border from top to bottom while counting down.
Yes—extend the logic to fill inner layers (not just the outer border). That becomes a spiral matrix pattern.
Use a fixed-width cell approach (padding or inline-block). Don’t rely on raw spaces for alignment in HTML.
Yes—when v is null, print 0 (and pad it) instead of spaces.

Explore More JavaScript Number Patterns!

Next, try filling the inside too to build a spiral number square.

All Number Patterns →
Did you know?

Many “border” patterns are the first step toward spiral matrix problems—once you can control borders, you can iterate inward.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 58 JavaScript Number Pattern 60