How to Make Square Bullets on Unordered Lists with CSS

Learn how to make square bullet points on unordered lists with the CSS property list-style-type.

By default, unordered list items (<ul>) on a web page uses round bullet points.

Round bullet points are styled like this:

ul {
  list-style-type: disc;
}

And look like this:

• HTML
• CSS
• JavaScript

To make your bullet points square, you can override the default list-style-type settings like this:

ul {
  list-style-type: square;
}

Square bullets example:

• HTML
• CSS
• JavaScript

Square bullet points are unusual, but on some websites, they’re a great fit. It depends on what stylistic look and theme you’re going for.