The list-style-type property in CSS is used to control the appearance of bullets or markers in HTML lists. Whether you’re working with unordered lists (<ul>) or ordered lists (<ol>), this property allows you to define how list items are marked—giving you precise control over your list styling.
In this post, we’ll explore what list-style-type does, how to use it, and which values are commonly available.
📝 What Is list-style-type?
The list-style-type property sets the marker style for a list item element. It applies to:
<ul>– unordered lists<ol>– ordered lists<li>– individual list items
Syntax:
selector {
list-style-type: value;
}
📋 Common Values for list-style-type
🔹 Unordered Lists (<ul>)
These use simple shapes like bullets:
| Value | Description |
|---|---|
disc | Solid circle (default) |
circle | Hollow circle |
square | Solid square |
none | No marker |
Example:
ul {
list-style-type: square;
}
🔸 Ordered Lists (<ol>)
These use numbers, letters, or Roman numerals:
| Value | Description |
|---|---|
decimal | 1, 2, 3, … (default) |
decimal-leading-zero | 01, 02, 03, … |
lower-alpha | a, b, c, … |
upper-alpha | A, B, C, … |
lower-roman | i, ii, iii, … |
upper-roman | I, II, III, … |
Example:
ol {
list-style-type: upper-roman;
}
🚫 Removing List Markers
To remove bullets or numbers from a list:
ul {
list-style-type: none;
padding-left: 0; /* optional: removes indentation */
}
This is common in nav menus and custom list styles where you want full design control.
✅ Where to Apply list-style-type
You can apply it directly to:
<ul>or<ol>(entire list)<li>(individual list items, for granular control)
li.special {
list-style-type: square;
}
🧩 Related Properties
list-style: Shorthand forlist-style-type,list-style-position, andlist-style-image.list-style-position: Controls whether the marker is inside or outside the content box.list-style-image: Replaces the bullet with a custom image.
📝 Final Thoughts
The list-style-type property gives you flexibility to style lists exactly how you want—from traditional bullets to custom numbering schemes or no markers at all. Mastering this property allows you to build cleaner menus, readable documentation, or stylish interfaces without relying on extra HTML or JavaScript.
