By Maya Chen, lettering designer and type educator · Checked by Jordan Hale · · How we review content
Key facts
- Box drawing characters are the Unicode block U+2500 to U+257F: 128 line pieces including straight lines, corners, tees and crosses in light, heavy and double weights.
- The block also holds dashed lines, four rounded corners (╭ ╮ ╰ ╯) and diagonals.
- Block elements (U+2580 to U+259F) are filled areas such as █, half blocks and the shades ░ ▒ ▓, used for progress bars and terminal bar charts.
- Box lines only join when every character has the same width and the line height leaves no gap, as in monospace fonts such as Consolas, Menlo or DejaVu Sans Mono.
- Box drawing characters are Unicode, not ASCII: ASCII has only - | + and _ for drawing lines.
- In Microsoft Word, type a code point such as 2500 and press Alt+X to insert the matching box drawing character.
How are box drawing characters organised?
| Weight | Example | Use |
|---|---|---|
| Light | ┌─┬─┐ │ └─┴─┘ |
Tables, trees, simple boxes |
| Heavy | ┏━┳━┓ ┃ |
Headings, emphasis |
| Double | ╔═╦═╗ ║ |
Titles, retro game menus |
| Mixed | ┝ ┿ ╞ |
Joining a heavy or double line to a light one |
| Dashed | ┄ ┆ ┈ ┊ |
Dotted guides |
| Rounded | ╭ ╮ ╰ ╯ |
Friendly, modern boxes |
Each corner, tee and cross exists in every combination of weights, which is why there are 128 of them: a light vertical line can meet a heavy horizontal one, a double line can turn into a single one, and so on. Pick the piece whose name matches the lines it joins.
What are block elements and shades?
The block elements (U+2580 to U+259F) are not lines but filled areas: full block █, half blocks ▀ ▄ ▌ ▐, quarter blocks and the three shades ░ ▒ ▓. They are used for progress bars, bar charts in terminals and the big text generator.
Where should I start?
- Want a box around your words? The ASCII border maker offers 12 border styles with alignment and padding, ready to copy.
- Want a separator line? The ASCII divider maker has 20 styles from plain dashes to hearts and sparkles.
- Want large block lettering? The big text generator builds banners from block elements, with five fill styles.
- Want to look up a plain keyboard code? The ASCII table lists all 128 ASCII codes, and the ASCII art galleries show what is possible with them.
How do I draw a folder tree?
The folder tree in the examples uses only four pieces: ├── for an item with more below it, └── for the last item, │ to continue a level and spaces to indent. It is the style used by the tree command and in many README files.
For boxes around your own words, use the ASCII border maker, which frames text with box drawing characters; for single lines, the ASCII divider maker.
Frequently asked questions
Basics
What are box drawing characters?
A Unicode block, U+2500 to U+257F, of 128 line pieces: straight lines, corners, tees and crosses in light, heavy and double weights, plus dashed lines, four rounded corners and diagonals. They come from the line-drawing sets of old text terminals and PC code pages, where they were used to draw windows and menus.
What is the difference between light, heavy and double lines?
They are three weights of the same line pieces. Light lines (┌─┐ │) suit tables, trees and simple boxes, heavy lines (┏━┓ ┃) suit headings and emphasis, and double lines (╔═╗ ║) suit titles and retro game menus. Mixed pieces join a heavy or double line to a light one.
Why are there so many corner and tee characters?
Each corner, tee and cross exists in every combination of weights, which is why the block has 128 characters. A light vertical line can meet a heavy horizontal one, a double line can turn into a single one, and so on. Pick the piece whose name matches the lines it joins.
Which box drawing characters have rounded corners?
Four characters: ╭ ╮ ╰ ╯, for the top left, top right, bottom left and bottom right. They give boxes a friendlier, more modern look than the square corners ┌ ┐ └ ┘. They are light-weight only, so use them with light lines such as ─ and │.
What are block elements and shades?
Block elements, U+2580 to U+259F, are filled areas rather than lines: the full block █, half blocks ▀ ▄ ▌ ▐, quarter blocks and the three shades ░ ▒ ▓. They are used for progress bars, bar charts in terminals and the big text generator.
Where it works
Are box drawing characters ASCII?
No. ASCII has only - | + and _ for lines. Box drawing characters are Unicode, so they need UTF-8 and a font that includes them. Almost every system font does, but very old terminals or programs that only accept ASCII will show them as question marks or boxes.
Do box drawing characters work in Discord and Slack?
Yes, if you put them in a code block. Three backticks around the text make Discord, Slack and WhatsApp use a monospace font, which keeps the lines joined. Outside a code block the font is proportional and you see gaps between rows. Almost every system font includes the characters.
Where can I make boxes around my own text?
Use the ASCII border maker, which offers 12 border styles with alignment and padding, or the ASCII divider maker for single lines. Both give you text to copy for code comments, Discord, a README or a bio.
How it works
Why don't my lines join up?
Box lines only meet when every character is the same width and the line height leaves no gap, which is the case in monospace fonts such as Consolas, Menlo or DejaVu Sans Mono. In proportional fonts, or with extra line spacing, you see gaps between rows. Paste into a code block or set a monospace font.
How do I type them?
There is no keyboard shortcut on most systems. Copy them from this page, type the code point with Alt+X in Microsoft Word (for example 2500 then Alt+X), or use your system's character viewer. In many programming languages you can write them as escapes such as ─.
How do I make a table with box drawing characters?
Build it from light pieces: ┌─┬─┐ for the top edge, │ for cell walls, ├─┼─┤ between rows and └─┴─┘ for the bottom. Keep every row the same number of characters and paste the result into a code block or a monospace font, or the columns will drift apart.
How do I draw a folder tree?
Use four pieces: ├── for an item with more below it, └── for the last item in a level, │ to continue a level and spaces to indent. It is the style used by the tree command and in many README files. Paste it into a code block so that the lines stay aligned.