What counts as the 'border' that gets numbered?

Only the outer edge of the rectangle: the entire top row, the entire bottom row, and just the leftmost and rightmost cells of every row in between. Every other cell (the interior) is left blank.

In what order are the border cells numbered?

Clockwise, starting from the top-left corner: left to right across the top row, then down the right-hand column, then right to left across the bottom row, then up the left-hand column back to just below the starting corner.

What happens with a width or height of 1?

There's no interior to leave blank in that case, so the entire single row (or single column) is treated as the border and numbered straight across (or down), rather than the tool trying to trace a loop that wouldn't exist.

How is this related to the spiral drawers?

It reuses the same clockwise boundary-walk idea as this category's spiral drawers, but stops after tracing just the outermost ring instead of continuing to spiral inward, which is exactly what produces the hollow interior.

Integer Box Drawer - ASCII Hollow Rectangle Online

Overview

Introduction

This tool draws a hollow rectangle, numbering only its outer border with consecutive integers, walked clockwise from the top-left corner, and leaving the entire interior blank.

Pick a width and height, and it traces the border in the same clockwise direction a spiral drawer would start with, just stopping after one full ring instead of continuing inward.

What Is Integer Box Drawer?

An ASCII-art generator for a hollow rectangle outline: a width-by-height grid where only the top row, bottom row, and the two side columns in between are filled with numbers.

The interior of the rectangle (everything that isn't on that outer edge) is left as blank space, making the shape read clearly as a hollow box rather than a solid block.

How Integer Box Drawer Works

The border path is computed by walking clockwise from the top-left corner: across the entire top row, down the right column, back across the entire bottom row, and up the left column to just below the starting point.

Consecutive integers (0, 1, 2, ...) are assigned to each border cell in that walk order; every non-border (interior) cell stays blank.

Every cell in the grid, filled or blank, is padded to the width of the largest border index used, so the grid's columns line up regardless of how many digits the highest number needs.

When To Use Integer Box Drawer

Use it for decorative ASCII art, like a numbered border frame for a text-based diagram or comment block.

It's also a simple illustration of a boundary-only traversal, useful for teaching the idea behind spiral or ring-tracing algorithms without the added complexity of spiraling inward.

Often used alongside Integer Spiral Drawer, Integer Diamond Drawer and Integer Circle Drawer.

Features

Advantages

Deterministic: the same width and height always produce the exact same numbered border.
Clearly hollow: the interior is always genuinely blank, never accidentally filled.
Handles the width-1 and height-1 edge cases explicitly, rather than producing a broken or empty grid for them.

Limitations

Only supports width and height from 2 to 60 each, to keep the grid a reasonable size to render (a width or height of 1 is handled as a special single-line case rather than a true hollow rectangle).
Purely decorative ASCII art; the numbering is just a boundary-walk counting sequence, not a mathematically meaningful labeling.
Requires a monospace font/context to display the grid's columns aligned correctly.

Examples

A 5x4 hollow box

Input

width 5, height 4

Output

 0  1  2  3  4
13           5
12           6
11 10  9  8  7

The border is numbered clockwise from the top-left (0 through 13); the two interior cells in the middle rows are left blank.

A fully-filled 2x2 box

Input

width 2, height 2

Output

0 1
3 2

With no room for an interior, every cell in a 2x2 box is part of the border, so the whole grid gets numbered.

Best Practices & Notes

Best Practices

Use a width and height of at least 3 each if you specifically want a visible blank interior; 2x2 (or smaller) boxes have no interior at all.
View the output in a monospace font/context so the grid's columns stay visually aligned.

Developer Notes

The border coordinates are computed with the same clockwise boundary-walk approach the spiral drawers use for their outermost ring (top row left-to-right, right column top-to-bottom, bottom row right-to-left, left column bottom-to-top), just without the recursive shrink-and-repeat step that would continue spiraling into the interior; width-1 and height-1 grids are handled as explicit special cases since a single row or column has no distinct top/bottom/left/right edges to walk separately.

Integer Box Drawer Use Cases

Decorative ASCII art for a text file, README, or comment block
A numbered border frame for a text-based diagram
Illustrating a boundary-only (non-spiraling) grid traversal for teaching purposes

Common Mistakes

Expecting the interior to contain any numbers; only the outer border is ever filled, the interior is always blank.
Viewing the output in a proportional font, where the grid's columns won't visually align.
Using a width or height of 1 and expecting an error; those are handled as a valid single-line special case instead.

Tips

Try a wide, short rectangle (like 10x3) versus a narrow, tall one (like 3x10) to see how the border numbering wraps differently.
Compare this tool's clockwise border walk to the Integer Spiral Drawer to see how the same idea extends inward.

Integer Box Drawer