List style type

Change bullet styles with list-style-type.

Change the marker

In HTML, the ul and ol tags create lists. By default, ul shows a filled disc and ol shows arabic numerals (decimal). The CSS list-style-type property changes these markers.

For example, writing square for ul gives square markers, and lower-roman for ol gives roman numerals. The list's shape then fits its content.

Common values

Common values for bulleted lists: disc (filled circle), circle (hollow circle), square (square). For numbered lists: decimal (1, 2, 3), lower-alpha (a, b, c), lower-roman (i, ii, iii), upper-roman (I, II, III).

Once you pick a value, the browser puts that marker in front of every item. The marker style is uniform inside one list; mixing shapes needs separate classes per item.

Exercise Turn a numbered list into roman numerals

Write an ol type selector and assign list-style-type: lower-roman. The numbered list will then show lowercase roman numerals.

Show example solution

/* change the numbered list marker */
ol {
  list-style-type: lower-roman;
}

Test yourself

What does list-style-type: lower-roman produce?
```
ol {
  list-style-type: lower-roman;
}
```
- i, ii, iii, iv
- 1, 2, 3, 4
- a, b, c, d
- •, •, •, •
Show answer

i, ii, iii, iv — Correct. lower-roman gives lowercase roman numerals: i, ii, iii.

Set a square marker

ul {
  ____;
}

Show answer

ul {
  list-style-type: square;
}

Match each value to its meaning

disc

Filled circle
circle

Hollow circle
square

Square marker
decimal

1, 2, 3, 4

Next lesson: List style position

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies