CSS list-style-type Property

What You’ll Learn

The list-style-type property defines the marker style for list items. It controls bullets on unordered lists and numbering styles on ordered lists.

Introduction

The list-style-type property in CSS is used to define the appearance of the list item marker for ordered lists (<ol>) and unordered lists (<ul>). This property allows you to customize the bullets, numbers, or other markers that appear before each list item, enhancing the visual presentation of lists on your website.

Definition and Usage

Apply list-style-type on ul, ol, or individual li elements. Use keyword values like square, lower-alpha, or upper-roman to match your design. Pair it with list-style-position and list-style-image, or use the list-style shorthand.

📝 Syntax

The syntax for the list-style-type property is simple and can be applied to list elements (<ul>, <ol>, <li>):

selector {
  list-style-type: type;
}

Here, type specifies the marker type, which can be a predefined keyword such as disc, decimal, or none.

Basic Example

ul {
  list-style-type: square;
}

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

Syntax Rules

• Values are keywords that define marker appearance.
• The property is inherited by list items.
• none removes the marker entirely.
• Some values work best on ul, others on ol, but browsers accept most keywords on both.

💎 Property Values

🎯 Default Value

The default value of the list-style-type property depends on the type of list:

• For unordered lists (<ul>), the default value is disc.
• For ordered lists (<ol>), the default value is decimal.

Examples Gallery

Style unordered and ordered lists, compare bullet shapes, use alphabetic counters, and remove markers for navigation.

<style>
  ul {
    list-style-type: square;
  }
  ol {
    list-style-type: upper-roman;
  }
</style>

<h2>Unordered List</h2>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<h2>Ordered List</h2>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

.disc { list-style-type: disc; }
.circle { list-style-type: circle; }
.square { list-style-type: square; }

ol.alpha {
  list-style-type: lower-alpha;
}

ol.padded {
  list-style-type: decimal-leading-zero;
}

nav ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

♿ Accessibility

• Use real list elements — Keep ul and ol markup even when markers are hidden with none.
• Do not remove markers from true content lists without reason — Bullets and numbers help users scan items.
• Screen readers still announce list length — Marker styling is mostly visual.
• Choose readable counter styles — Very decorative numbering can confuse readers on long lists.
• Nest lists properly — Use sub-lists for hierarchy instead of manual prefixes in text.

💡 Best Practices