How to Make Bullets Square on Unordered Lists using CSS

Using CSS, you can change practically anything design-wise on a webpage.

One of the most common design changes you might need to make when working with unordered lists is changing the shape of the bullets.

By default, they are circles but some like to replace that with squares.

In this post, we'll learn how to replace circle bullets on unordered lists with squares using CSS.

How to Change Bullets on Unordered Lists to Squares

First, let's define some example HTML markup that we'll be using for this example:

HTML
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

This simple unordered list is just 3 items long, and it looks like this:

Notice how the bullets are circles by default.

This is because by default, the list-style-type property is set to disc which is a circle:

CSS
ul {
    list-style-type: disc;
}

Therefore, in order to change the bullets to squares, we need to change the list-style-type property to square:

CSS
ul {
    list-style-type: square;
}

Now, let's see how this looks using the same HTML markup:

Now with our new list-style-type property set to square, the bullets are now squares, as we wanted.

Keep in mind that there are other values for this, including georgian, decimal, circle, and more, each with their own unique look and effect.

Conclusion

In this post, we learned how to change the bullets on unordered lists to squares using CSS.

Simply change the list-style-type property to square and you're good to go.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share