HtmlHow-ToBeginner · 3 min read

How to Change List Style in HTML: Simple Steps and Examples

To change the list style in HTML, use the list-style-type CSS property on your <ul> or <ol> elements. This property lets you choose different bullet shapes or numbers, such as circle, square, or decimal.

📐

Syntax

The list-style-type CSS property controls the marker (bullet or number) style of list items inside <ul> or <ol> elements.

list-style-type: sets the bullet or number style.
Common values include disc, circle, square for unordered lists, and decimal, lower-alpha, upper-roman for ordered lists.

css

ul {
  list-style-type: circle;
}

ol {
  list-style-type: upper-roman;
}

💻

Example

This example shows how to change the bullet style of an unordered list to circles and the numbering style of an ordered list to uppercase Roman numerals.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Change List Style Example</title>
  <style>
    ul {
      list-style-type: circle;
      padding-left: 1.5rem;
    }
    ol {
      list-style-type: upper-roman;
      padding-left: 1.5rem;
    }
  </style>
</head>
<body>
  <h2>Unordered List with Circle Bullets</h2>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
  </ul>

  <h2>Ordered List with Upper Roman Numerals</h2>
  <ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
  </ol>
</body>
</html>

Output

A webpage showing a heading 'Unordered List with Circle Bullets' followed by a bulleted list with round hollow circles as bullets: Apple, Banana, Cherry. Below it, a heading 'Ordered List with Upper Roman Numerals' followed by a numbered list with I., II., III. as numbers: First step, Second step, Third step.

⚠️

Common Pitfalls

One common mistake is trying to change the list style by adding bullets or numbers manually inside the <li> tags, which can cause accessibility and styling issues.

Another pitfall is forgetting to add left padding or margin, which can make the bullets or numbers overlap with the text.

html + css

/* Wrong way: manually adding bullets */
<ul>
  <li>• Apple</li>
  <li>• Banana</li>
</ul>

/* Right way: use CSS list-style-type */
ul {
  list-style-type: square;
  padding-left: 1.5rem;
}

📊

Quick Reference

Here are some common list-style-type values:

List Type	Description	Example Value
Unordered List	Filled circle bullet	disc
Unordered List	Hollow circle bullet	circle
Unordered List	Square bullet	square
Ordered List	Decimal numbers	decimal
Ordered List	Lowercase letters	lower-alpha
Ordered List	Uppercase Roman numerals	upper-roman
Ordered List	Lowercase Roman numerals	lower-roman

✅

Key Takeaways

Use the CSS property list-style-type to change bullet or number styles in lists.

Apply list-style-type to the ul or ol element, not individual li items.

Add left padding or margin to avoid bullet or number overlapping with text.

Avoid manually typing bullets or numbers inside list items for better accessibility.

Common list-style-type values include disc, circle, square, decimal, and upper-roman.