The CSS list-style property
The CSS list-style property controls the marker on list items — its type, position and an optional image. list-style: none removes bullets and numbers entirely, the most common use, typically for navigation menus. It is a shorthand for list-style-type, list-style-position and list-style-image.
Overview
list-style styles the marker that sits beside each item in a <ul> or <ol> — the bullet or the number. As a shorthand it bundles three things: the marker type (disc, decimal, square and many more), its position (inside or outside the content), and an optional marker image.
The overwhelmingly common use is list-style: none, which strips the markers off completely. Almost every navigation bar and styled list starts here, because a menu built from a <ul> should not show bullets. You will usually pair it with resetting the list's default padding and margin, which is where the browser's indentation actually comes from.
When you do keep markers, the type options are richer than people expect — lower-alpha and upper-roman for lettered and roman-numeral lists, square and circle for different bullets. For full control over the marker's color or size, the modern ::marker pseudo-element is the better tool, but list-style remains the quick way to set or clear the basics.
Syntax
/* a horizontal nav with no bullets */
.nav {
list-style: none;
margin: 0;
padding: 0;
}Values
The list-style property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
none |
Removes the marker (bullet or number). The most common value. |
disc, circle, square |
Bullet shapes for unordered lists. disc is the default. |
decimal |
1, 2, 3 numbering for ordered lists. |
lower-alpha, upper-roman |
Lettered (a, b, c) or roman-numeral (I, II, III) markers. |
inside, outside |
Whether the marker sits inside or outside the content box. |
Example
<style>
.nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; font: 600 14px system-ui, sans-serif; }
.nav a { color: #1c7ce9; text-decoration: none; }
.steps { list-style: lower-alpha; padding-left: 22px; font: 15px/1.7 system-ui, sans-serif; }
</style>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Docs</a></li>
<li><a href="#">Pricing</a></li>
</ul>
<ol class="steps">
<li>First step</li>
<li>Second step</li>
</ol>Best practices
- Removing bullets usually means
list-style: noneplus resetting the list's padding and margin, where the indentation lives. - Keep using a real
<ul>or<ol>for lists even when you hide the markers — the structure still helps assistive technology. - For control over a marker's color or size, style the
::markerpseudo-element rather than swapping in an image. - Choose the right type for ordered content —
lower-alphaorupper-romancan make steps and outlines clearer than plain numbers.
Accessibility
There is a quirk worth knowing: in some browsers, notably Safari with VoiceOver, setting list-style: none can make the screen reader stop announcing the element as a list — dropping the helpful "list, 5 items" context. If that grouping matters, you can restore it by adding role="list" back onto the element.
Either way, keep using genuine <ul> and <ol> elements for lists rather than a stack of <div>s. The list semantics help users of assistive technology understand structure and navigate, and hiding the visible markers does not have to mean throwing that away.
Frequently asked questions
How do I remove bullet points in CSS?
How do I change bullets to numbers or letters?
list-style-type: decimal for numbers or lower-alpha for letters. On an ordered list these become the markers.Does removing list bullets affect accessibility?
list-style: none removes the list role announced by screen readers. Keep using real <ul>/<ol> elements, and add role="list" back if the grouping matters.How do I change the bullet color?
::marker pseudo-element, e.g. li::marker { color: #1c7ce9; }. That targets the bullet or number directly.