CSS list-style-type Property

Description

The list-style-type property controls the visual marker that appears next to list items — the small glyph that indicates an item in an unordered or ordered list. It determines the shape or glyphing approach used for the list marker (the generated marker box), and therefore affects the visual rhythm and hierarchy of lists without changing the actual document semantics. Because it deals with the marker generation rather than the textual content of the list item, it is commonly applied to list containers or directly to list item elements and interacts with the browser’s marker-rendering logic.

The rendering of the marker produced by list-style-type interacts closely with other list-related properties. For example, the shorthand list-style can set marker appearance along with image or position in one declaration; list-style-image can replace the marker with a custom image; and list-style-position controls whether the marker sits inside or outside the principal content flow of the list item. Whether an element generates a marker at all depends on its display behavior (for example, list markers are produced for elements with display set to list-item), so these properties are often used together to achieve precise list layout.

Beyond visual styling, list-style-type has implications for accessibility and semantic clarity. Assistive technologies rely primarily on document structure rather than the exact glyph; changing the marker does not alter list semantics, but visual changes can influence ease of scanning for sighted users. When customizing list markers, it’s also important to consider alignment and spacing so that marker changes don’t reduce readability — many authors pair marker settings with careful use of margins, padding, or the ::marker pseudo-element to preserve consistent alignment and baseline relationships.

In practice, list-style-type is a lightweight, non-invasive way to control the look of lists: use it when you want to change the marker appearance while preserving the underlying list structure. For more advanced visual customizations (colors, font choices, or replacing the glyph entirely), authors often combine it with marker-targeted styling or image settings while ensuring that layout and accessibility remain intact.

Definition

Initial value: disc
Applies to: List item elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.listStyleType

Interactive Demo

Australia
New Zealand
United States
United Kingdom
India

Syntax

list-style-type: <counter-style> | <string> | none

Values

discfilled circle.
circlecircle
squaresquare
decimal
number. This is default for
1. decimal-leading-zeronumber with leading zeros (01, 02, 03, etc.)
2. lower-romanlower-roman (i, ii, iii, iv, v, etc.)
3. upper-romanupper-roman (I, II, III, IV, V, etc.)
4. lower-greeklower-greek
5. lower-alphalower-alpha (a, b, c, d, e, etc.)
6. lower-latinlower-latin (a, b, c, d, e, etc.)
7. upper-alphaupper-alpha (A, B, C, D, E, etc.)
8. upper-latinupper-latin (A, B, C, D, E, etc.)
9. armenianThe marker is traditional Armenian numbering
10. georgianTraditional Georgian numbering
11. noneNo marker is shown
12. inherit

Example

HTML

    <section class="lists-demo">

      <h1>CSS list-style-type examples</h1>

      <div class="grid">

        <div class="card">

          <h2>Unordered  -  disc</h2>

          <ul class="list-disc">

            <li>Apples</li>

            <li>Bananas</li>

            <li>Cherries</li>

          </ul>

        </div>

        <div class="card">

          <h2>Unordered  -  circle</h2>

          <ul class="list-circle">

            <li>Red</li>

            <li>Green</li>

            <li>Blue</li>

          </ul>

        </div>

        <div class="card">

          <h2>Unordered  -  square</h2>

          <ul class="list-square">

            <li>HTML</li>

            <li>CSS</li>

            <li>JavaScript</li>

          </ul>

        </div>

        <div class="card">

          <h2>Ordered  -  decimal</h2>

          <ol class="list-decimal">

            <li>First</li>

            <li>Second</li>

            <li>Third</li>

          </ol>

        </div>

        <div class="card">

          <h2>Ordered  -  lower-alpha</h2>

          <ol class="list-lower-alpha">

            <li>Option A</li>

            <li>Option B</li>

            <li>Option C</li>

          </ol>

        </div>

        <div class="card">

          <h2>No markers</h2>

          <ul class="list-none">

            <li>Item one</li>

            <li>Item two</li>

            <li>Item three</li>

          </ul>

        </div>

      </div>

    </section>

CSS

/* Basic layout and typography */
.lists-demo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
  color: #222;
}

.lists-demo h1 {
  margin-bottom: 16px;
  font-size: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.card {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.card h2 {
  font-size: 14px;
  margin: 0 0 8px;
}

/* Base list spacing */
ul,
ol {
  margin: 0;
  padding-left: 1.25rem;
}

/* Demonstrations of list-style-type */
.list-disc { list-style-type: disc; }
.list-circle { list-style-type: circle; }
.list-square { list-style-type: square; }
.list-decimal { list-style-type: decimal; }
.list-lower-alpha { list-style-type: lower-alpha; }
.list-none { list-style-type: none; padding-left: 0; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS list-style-type property. Hover over a browser icon to see the version that first introduced support for this CSS property.