Square marker for List Items

To set square marker for the list items in an unordered or ordered list using CSS, set list-style-type property for the list with the square value as shown in the following.

ul {
  list-style-type: square;
}
/* or */
ol {
  list-style-type: square;
}

Examples

ADVERTISEMENT

1. Square marker for ordered list items

In the following example, we take an ordered list and specify square as marker for the list items.

index.html

2. Square marker for unordered list items

In the following example, we take an unordered list and specify square as marker for the list items.

index.html

Conclusion

In this CSS Tutorial, we learned how to use CSS list-style-type property to set squared marker for list items, with examples.