Box drawing characters are a block of Unicode code points from U+2500 to U+257F (and related blocks) that provide lines, corners, junctions, and other shapes for constructing text-based borders, tables, and diagrams. They originated in character-cell terminal environments where graphics capabilities were limited, and they remain widely used in terminal UIs, command-line tool output, and programming language features that display tree structures.
The Box Drawing Block (U+2500-U+257F)
The 128 characters in this block systematically cover combinations of: - Line weight: light, heavy, double - Direction: horizontal, vertical - Corner type: all four corners - Junction type: T-shape (3-way) and cross (4-way) intersections - Dash patterns: dashed and dotted variants
Light lines:
U+2500 BOX DRAWINGS LIGHT HORIZONTAL (-)
U+2502 BOX DRAWINGS LIGHT VERTICAL (|)
U+250C BOX DRAWINGS LIGHT DOWN AND RIGHT (top-left corner)
U+2510 BOX DRAWINGS LIGHT DOWN AND LEFT (top-right corner)
U+2514 BOX DRAWINGS LIGHT UP AND RIGHT (bottom-left corner)
U+2518 BOX DRAWINGS LIGHT UP AND LEFT (bottom-right corner)
U+251C BOX DRAWINGS LIGHT VERTICAL AND RIGHT (left T-junction)
U+2524 BOX DRAWINGS LIGHT VERTICAL AND LEFT (right T-junction)
U+252C BOX DRAWINGS LIGHT DOWN AND HORIZONTAL (top T-junction)
U+2534 BOX DRAWINGS LIGHT UP AND HORIZONTAL (bottom T-junction)
U+253C BOX DRAWINGS LIGHT VERTICAL AND HORIZONTAL (cross)
Heavy lines:
U+2501 BOX DRAWINGS HEAVY HORIZONTAL
U+2503 BOX DRAWINGS HEAVY VERTICAL
U+250F BOX DRAWINGS HEAVY DOWN AND RIGHT
Double lines:
U+2550 BOX DRAWINGS DOUBLE HORIZONTAL
U+2551 BOX DRAWINGS DOUBLE VERTICAL
U+2554 BOX DRAWINGS DOUBLE DOWN AND RIGHT
Practical Example: Text Table
+----------+-----------+----------+
| Name | Age | City |
+----------+-----------+----------+
| Alice | 30 | Tokyo |
| Bob | 25 | Seoul |
+----------+-----------+----------+
Using proper box-drawing characters:
Name | Age | City
----------|-----------|----------
Alice | 30 | Tokyo
Bob | 25 | Seoul
HTML and CSS Rendering
<!-- Box drawing characters render best in monospace fonts -->
<pre style="font-family: monospace; line-height: 1.2;">
+------------------+
| Box Drawing UI |
+------------------+
</pre>
/* Ensure consistent rendering across platforms */
.tree-output {
font-family: 'Cascadia Code', 'Fira Code', 'Consolas',
'DejaVu Sans Mono', monospace;
line-height: 1.4;
white-space: pre;
}
Tree View Usage
Many command-line tools use box drawing for tree displays:
src/
|-- components/
| |-- Button.tsx
| +-- Input.tsx
|-- pages/
| +-- index.tsx
+-- utils/
+-- helpers.ts
// Generate a tree view with box drawing characters
const PIPE = '| ';
const TEE = '|-- ';
const LAST = '+-- ';
const BLANK = ' ';
function renderTree(node, prefix = '', isLast = true) {
const connector = isLast ? LAST : TEE;
let result = prefix + connector + node.name + '\n';
const childPrefix = prefix + (isLast ? BLANK : PIPE);
node.children?.forEach((child, i) => {
result += renderTree(child, childPrefix, i === node.children.length - 1);
});
return result;
}
Related Blocks
U+2580-U+259F Block Elements (partial block fills for shading)
U+25A0-U+25FF Geometric Shapes (filled and outline shapes)
U+2600-U+26FF Miscellaneous Symbols
U+1FB00-U+1FBFF Symbols for Legacy Computing (Braille, Teletext graphics)
Font Considerations
Box drawing characters require a font with proper glyph metrics to render seamlessly -- specifically, the glyphs must be designed to exactly fill their cell width and connect perfectly at edges. Fonts like Cascadia Code, Fira Code, JetBrains Mono, and Consolas are designed with this in mind. Variable-width or poorly designed monospace fonts may show gaps between box drawing characters.