How to Make Bullets Square on Unordered Lists using CSS
Table of Contents
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:
- HTML
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:
CSSul {
list-style-type: disc;
}
Therefore, in order to change the bullets to squares, we need to change the list-style-type
property to square
:
CSSul {
list-style-type: square;
}
Now, let's see how this looks using the same HTML markup:
- HTML
- CSS
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!
- Getting Started with TypeScript
- Getting Started with Solid
- Managing PHP Dependencies with Composer
- Getting Started with Electron
- How to Serve Static Files with Nginx and Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- Learn how to use v-model with a custom Vue component
- Getting Started with Handlebars.js
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Building a Real-Time Note-Taking App with Vue and Firebase
- Getting Started with Vuex: Managing State in Vue