What is box text?

Box text is text framed by a border made of characters, such as ┌───┐, │, and └───┘. Unicode has a whole block of box-drawing characters with single, double, heavy, rounded, and dashed lines that join into clean corners in a monospace font. Boxed text is used for code comment headers, README notes, terminal messages, and chat posts that need to stand out.

Tool description

This tool draws a border around your text. Choose a border style, align the lines to the left, center, or right, and add space inside the box. You can put a title in the top border and make your own border from any characters. The box grows to fit the longest line, and every row is padded so the right edge lines up.

Features

  • Single, double, rounded, heavy, dashed, and mixed Unicode borders
  • ASCII, asterisk, hash, solid block, shade, and half-block borders
  • Custom borders with your own corner, top and bottom, and side characters, which can be more than one character long
  • Left, center, or right alignment for multi-line text
  • Space on the left and right and empty lines above and below
  • A title in the top border, such as ┌─ Note ─────┐
  • Copy the result or download it as a text file

How it works

The tool measures each line in monospace cells. Most characters take one cell, while Chinese, Japanese, and Korean characters and most emoji take two, so the tool counts them as two when it pads the lines. Tabs become four spaces, and trailing spaces are removed. A top or bottom border made of several characters is repeated to fill the width and cut off at the right length.

Tips

  • Paste the box into a code block (three backticks in Markdown, Discord, or Slack) so it is shown in a monospace font. In a proportional font the right edge will not line up.
  • For a source code comment, use the ASCII or asterisk style, or add the comment characters, such as // or #, in front of each line afterwards.
  • Emoji widths differ between fonts and apps, so a box with emoji inside may still look uneven in some places.