CSS PROPERTIES
Expand All|Collapse All
CSS AT-RULES
SPONSORED LINKS

CSS list-style-type Property

Topic: CSS3 Properties Reference« Prev|Next »

Description

The list-style-type CSS property specifies the type of marker for the list-items.

The following table summarizes the usages context and the version history of this property.

Default value: disc
Applies to: List items
Inherited: Yes
Animatable: No. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

list-style-type: 
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | initial | inherit

The example below shows the list-style-type property in action.

  • ol {
  •     list-style-type: decimal-leading-zero;
  • }
  • ul {
  •     list-style-type: square;
  • }

Property Values

The following table describes the values of this property.

Value Description
disc The marker is a filled circle.
circle The marker is a hollow circle.
square The marker is a filled square.
decimal

The marker is a –

  • Decimal number
  • 2Beginning with 1.
decimal-leading-zero

The marker is a –

  • Decimal number
  • Padded by initial zero
  • (e.g., 01, 02, 03, ... 10, 11)
lower-roman

The marker is –

  • Lowercase roman numerals
  • (i, ii, iii, iv, v, ...)
upper-roman

The marker is –

  • Uppercase roman numerals
  • (I, II, III, IV, V, ...)
lower-greek

The marker is –

  • Lowercase Greek letters
  • alpha, beta, gamma, ...
  • (a, β, ?, ...)
lower-latin

The marker is –

  • Lowercase Latin letters
  • b. (a, b, c, ... z)
upper-latin

The marker is –

  • Uppercase Latin letters
  • (A, B, C, ... Z)
armenian

The marker is –

  • Traditional Armenian numbering
  • (ayb/ayp, ben/pen, gim/keem, ...)
georgian

The marker is –

  • Traditional Georgian numbering
  • (an, ban, gan, ... he, tan, in ...)
lower-alpha

The marker is –

  • Uppercase Latin letters
  • (a, b, c, ... z)
upper-alpha

The marker is –

  • Uppercase Latin letters
  • (A, B, C, ... Z)
none Specifies no marker.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element list-style-type property.

Browser Compatibility

The list-style-type property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+
 

Warning:Internet Explorer 7 and earlier versions don't support the value lower-latin and upper-latin, use lower-alpha and upper-alpha instead.


Further Reading

See tutorial on: HTML List, CSS Lists.

Related properties: list-style, list-style-image, list-style-position.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.