Sometimes using the default bullet points in a list isn’t enough. You’ve written a <ul> and it renders fine, but you think “can I change those default bullet points?”. Maybe switch them to squares or even remove them entirely?
That’s where the list-style family of CSS properties comes in.
The Three Main Parts
The list-style shorthand combines three properties:
Let’s analyze that further.
1. list-style-type: The bullet shape (or number format)
You’ll use this property often. It defines the actual marker.
Common values include:
disc(default round bullet)circlesquaredecimal(for ordered lists)none(to remove the marker entirely)
Prefer lowercase alphabet letters? Try lower-alpha.
Want Roman numerals? Use upper-roman.
In an instant, the alphanumeric numbers change to a new design.
2. list-style-position: Where the bullet shows up
This one decides where the bullet appears in relation to the content.
outside(default): the bullet sits outside the content box.inside: the bullet aligns with the text itself, meaning long lines wrap beneath the bullet.
Use inside if you want more dense layouts or more compact indentation.
3. list-style-image: Custom markers
With this property, you can use an image as your bullet.
It’s not used often these days, mostly because icon fonts or inline SVG give you more control, but it can be helpful for branding-focused designs.
Should You Use the Shorthand or Declare Properties Individualy?
When you want quick control over all three properties in one go the shorthand is the prefered way:
Note: If you’re usinglist-style-type: noneto hide bullets for a custom-styled list (say, with Flexbox or grid), remember to reset defaultpadding-lefton the<ul>or<ol>as well. Otherwise, you’ll still get unwanted spacing.
Getting rid of list markers doesn’t work as intended.
We need to reset default padding and margin in order to achieve what we want.
And now the list is aligned with the rest of the text.
Although my blog doesn’t support comments, feel free to reply via email or X.