The list-style-type specifies the type of list-item marker in a list.

ul {
    list-style-type: square;
}

• Item 1
• Item 2
• Item 3

ol {
    list-style-type: lower-alpha;
}

1. Item 1
2. Item 2
3. Item 3

Default value	disc
Inherited values	yes
Can it be animated?	no

These are the allowed values.

Value	Description
disc	The marker is a filled circle (default on unordered lists)
armenian	The marker is traditional Armenian numbering
circle	The marker is a circle
cjk-ideographic	The marker is plain ideographic numbers
decimal	The marker is a number (default on ordered lists)
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker is shown
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek	The marker is upper-greek
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_ul').style.listStyleType = 'square';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_ul').style.listStyleType = 'square';
}
</script>

---