In our earlier article, we have explained the alt code shortcuts for circle symbols. If you want to insert oval or ellipse shape symbol, Unicode has different set of code points for them. You can use alt key in Windows and option key in Mac to type ellipse symbols.
Alt Code Shortcuts for Ellipse Symbols
There are four ellipse symbols you can type using keyboard shortcuts. They are in horizontal and vertical format in black and white colors. Below are the alt code shortcuts for ellipse symbols in Windows and Mac.
| Symbol | Name | Windows Alt Code | Mac Option Code |
|---|---|---|---|
| ⬬ | Black Horizontal Ellipse | Alt + 11052 | Option + 2B2C |
| ⬭ | White Horizontal Ellipse | Alt + 11053 | Option + 2B2D |
| ⬮ | Black Vertical Ellipse | Alt + 11054 | Option + 2B2E |
| ⬯ | White Vertical Ellipse | Alt + 11055 | Option + 2B2F |
How to Type Ellipse Symbols?
On Windows computers, you can press one of the alt keys and type alt code as given in the above table. However, you need to use the numeric pad for typing numbers after enabling number lock. For example, typing alt + 11052 will make black horizontal ellipse symbol like ⬬.
If you have MacBook or any other Apple computers, you can still use alt codes in hexadecimal format. First, change the input method to Unicode Hex Input. After that, press one of the option keys and type the hexadecimal code as given in the above table. For example, typing option + 2B2F will produce white vertical ellipse symbol like ⬯.
On HTML documents, you can use decimal code like ⬯ or hexadecimal code like ⬯ to insert these symbols.
Instead of directly using ellipse symbols in HTML, you can insert them in CSS. You can use the hexadecimal code in \2B2D format in CSS.
HTML and CSS Code Examples
Below are the example codes for inserting ellipse symbols in HTML and CSS.
<span>⬬</span>
<span>⬭</span>
<span>⬮</span>
<span>⬯</span>li:before {
content:\2B2E;
}Symbol Display
Black ellipse is a solid symbols while white ellipse is a outline symbol. Because of this, when you apply color to black ellipse symbol, the entire symbol will be changed to that color. However, only the outline will change for the white ellipse symbol. Below are some of the variations with different colors and background.
⬬
⬭
⬮
⬯
As you can see, even you can apply white color fill in black ellipse. It is also possible to apply bold and italic formatting to these symbols.
