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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    ol {
      list-style-type: square;
    }
  </style>
</head>
<body>
  <ol>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Mango</li>
  </ol>
</body>
</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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    ul {
      list-style-type: square;
    }
  </style>
</head>
<body>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Mango</li>
  </ul>
</body>
</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.