Box Drawing & Block Elements | HTML Entity & Character Reference

Entities Box Drawing & Block Elements

Unicode provides box drawing and block characters for creating lines, borders, corners, intersections, shaded areas, progress indicators, diagrams, and other text-based graphics.

Box drawing characters can be combined to form connected structures, while block elements provide filled and shaded rectangular areas. These characters can be represented with decimal or hexadecimal numeric character references or entered directly in a UTF-8 HTML document.

Box Drawing Lines

Basic box drawing characters provide horizontal and vertical lines in light and heavy styles. They can be combined with corners and intersections to create text-based boxes and diagrams.

Character	Named	Decimal	Hexadecimal	Description
─	`&boxh;`	`─`	`─`	Box drawings light horizontal
━	—	`━`	`━`	Box drawings heavy horizontal
│	`&boxv;`	`│`	`│`	Box drawings light vertical
┃	—	`┃`	`┃`	Box drawings heavy vertical
╌	—	`╌`	`╌`	Box drawings light double dash horizontal
╍	—	`╍`	`╍`	Box drawings heavy double dash horizontal
╎	—	`╎`	`╎`	Box drawings light double dash vertical
╏	—	`╏`	`╏`	Box drawings heavy double dash vertical

Corners

Corner characters connect horizontal and vertical lines to form the four corners of boxes, tables, diagrams, and other text-based structures.

Character	Named	Decimal	Hexadecimal	Description
┌	`&boxdr;`	`┌`	`┌`	Box drawings light down and right
┐	`&boxdl;`	`┐`	`┐`	Box drawings light down and left
└	`&boxur;`	`└`	`└`	Box drawings light up and right
┘	`&boxul;`	`┘`	`┘`	Box drawings light up and left
┏	—	`┏`	`┏`	Box drawings heavy down and right
┓	—	`┓`	`┓`	Box drawings heavy down and left
┗	—	`┗`	`┗`	Box drawings heavy up and right
┛	—	`┛`	`┛`	Box drawings heavy up and left

Intersections

Intersection characters connect three or four box drawing lines. They are useful for constructing grids, tables, organizational diagrams, and other connected structures.

Character	Named	Decimal	Hexadecimal	Description
├	`&boxvr;`	`├`	`├`	Box drawings light vertical and right
┤	`&boxvl;`	`┤`	`┤`	Box drawings light vertical and left
┬	`&boxhd;`	`┬`	`┬`	Box drawings light down and horizontal
┴	`&boxhu;`	`┴`	`┴`	Box drawings light up and horizontal
┼	`&boxvh;`	`┼`	`┼`	Box drawings light vertical and horizontal
┣	—	`┣`	`┣`	Box drawings heavy vertical and right
┫	—	`┫`	`┫`	Box drawings heavy vertical and left
┳	—	`┳`	`┳`	Box drawings heavy down and horizontal
┻	—	`┻`	`┻`	Box drawings heavy up and horizontal
╋	—	`╋`	`╋`	Box drawings heavy vertical and horizontal

Double-Line Box Drawing

Double-line box drawing characters provide another style for constructing borders, tables, and diagrams. They can be combined to create complete double-line frames and grids.

Character	Named	Decimal	Hexadecimal	Description
═	`&boxH;`	`═`	`═`	Box drawings double horizontal
║	`&boxV;`	`║`	`║`	Box drawings double vertical
╔	`&boxDR;`	`╔`	`╔`	Box drawings double down and right
╗	`&boxDL;`	`╗`	`╗`	Box drawings double down and left
╚	`&boxUR;`	`╚`	`╚`	Box drawings double up and right
╝	`&boxUL;`	`╝`	`╝`	Box drawings double up and left
╠	`&boxVR;`	`╠`	`╠`	Box drawings double vertical and right
╣	`&boxVL;`	`╣`	`╣`	Box drawings double vertical and left
╦	`&boxHD;`	`╦`	`╦`	Box drawings double down and horizontal
╩	`&boxHU;`	`╩`	`╩`	Box drawings double up and horizontal
╬	`&boxVH;`	`╬`	`╬`	Box drawings double vertical and horizontal

Block Elements

Block elements provide solid and fractional rectangular areas. They can be combined to create bar charts, progress indicators, text-based graphics, and other visual patterns.

Character	Named	Decimal	Hexadecimal	Description
▀	—	`▀`	`▀`	Upper half block
▁	—	`▁`	`▁`	Lower one eighth block
▂	—	`▂`	`▂`	Lower one quarter block
▃	—	`▃`	`▃`	Lower three eighths block
▄	—	`▄`	`▄`	Lower half block
▅	—	`▅`	`▅`	Lower five eighths block
▆	—	`▆`	`▆`	Lower three quarters block
▇	—	`▇`	`▇`	Lower seven eighths block
█	`&block;`	`█`	`█`	Full block
▉	—	`▉`	`▉`	Left seven eighths block
▌	—	`▌`	`▌`	Left half block
▐	—	`▐`	`▐`	Right half block

Shading

Shaded block characters provide different visual densities. They are useful for text-based shading, patterns, diagrams, and simple graphical indicators.

Character	Named	Decimal	Hexadecimal	Description
░	—	`░`	`░`	Light shade
▒	—	`▒`	`▒`	Medium shade
▓	—	`▓`	`▓`	Dark shade
▔	—	`▔`	`▔`	Upper one eighth block
▕	—	`▕`	`▕`	Right one eighth block

Using Box Drawing & Block Elements in HTML

Box drawing and block characters can be entered directly in UTF-8 HTML or written with named, decimal, or hexadecimal character references. A monospace font generally produces the best alignment when several characters are combined into a text-based diagram.

<pre>
&boxdr;&boxh;&boxh;&boxh;&boxdl;
&boxv;   &boxv;
&boxur;&boxh;&boxh;&boxh;&boxul;
</pre>

<p>Progress: &block;&block;&block;&#9617;&#9617;</p>

Browser Result

┌───┐
│   │
└───┘

Progress: ███░░