List-style-type - CSS: Cascading Style Sheets - MDN Web Docs

• Skip to main content
• Skip to search
• Skip to select language

1. References
2. CSS
3. list-style-type

Article Actions

• English (US)
  • Remember language
  • Deutsch
  • Español
  • Français
  • 日本語
  • 中文 (简体)

• Try it
• Syntax
• Accessibility
• Formal definition
• Formal syntax
• Examples
• Specifications
• Browser compatibility
• See also

1. CSS
2. Beginner's tutorials
3. Your first website: Styling the content
4. CSS styling basics
   1. What is CSS?
   2. Getting started with CSS
   3. Challenge: Styling a biography page
   4. Basic CSS selectors
   5. Attribute selectors
   6. Pseudo-classes and pseudo-elements
   7. Combinators
   8. The box model
   9. Handling conflicts
   10. CSS values and units
   11. Sizing items in CSS
   12. Backgrounds and borders
   13. Overflowing content
   14. Images, media, and form elements
   15. Styling tables
   16. Debugging CSS
   17. Challenge: Fundamental CSS comprehension
   18. Challenge: Creating fancy letterheaded paper
   19. Challenge: A cool-looking box
5. CSS text styling
   1. Fundamental text and font styling
   2. Styling lists
   3. Styling links
   4. Web fonts
   5. Challenge: Typesetting a community school homepage
6. CSS layout
   1. Introduction to CSS layout
   2. Floats
   3. Positioning
   4. Flexbox
   5. CSS grid layout
   6. Responsive design
   7. Media query fundamentals
   8. Challenge: Fundamental layout comprehension
7. CSS reference
8. Modules
   1. CSS anchor positioning
   2. CSS animations
   3. CSS backgrounds and borders
   4. CSS basic user interface
   5. CSS box alignment
   6. CSS box model
   7. CSS box sizing
   8. CSS cascade and inheritance
   9. CSS color adjustment
   10. CSS colors
   11. CSS compositing and blending
   12. CSS conditional rules
   13. CSS containment
   14. CSS counter styles
   15. CSS custom properties for cascading variables
   16. CSS display
   17. CSS filter effects
   18. CSS flexible box layout
   19. CSS font loading
   20. CSS fonts
   21. CSS fragmentation
   22. CSS generated content
   23. CSS grid layout
   24. CSS images
   25. CSS inline layout
   26. CSS lists and counters
   27. CSS logical properties and values
   28. CSS masking
   29. CSS media queries
   30. CSS motion path
   31. CSS multi-column layout
   32. CSS namespaces
   33. CSS nesting
   34. CSS overflow
   35. CSS overscroll behavior
   36. CSS paged media
   37. CSS positioned layout
   38. CSS properties and values API
   39. CSS pseudo-elements
   40. CSS ruby layout
   41. CSS scoping
   42. CSS scroll snap
   43. CSS scroll-driven animations
   44. CSS scrollbars styling
   45. CSS selectors
   46. CSS shadow parts
   47. CSS shapes
   48. CSS syntax
   49. CSS table
   50. CSS text
   51. CSS text decoration
   52. CSS transforms
   53. CSS transitions
   54. CSS view transitions
   55. CSS writing modes
   56. CSSOM view
9. Properties
   1. -moz-*
      1. -moz-float-edge Non-standard Deprecated
      2. -moz-force-broken-image-icon Non-standard Deprecated
      3. -moz-image-region Non-standard
      4. -moz-orient Non-standard
      5. -moz-user-focus Non-standard Deprecated
      6. -moz-user-input Non-standard Deprecated
   2. -webkit-*
      1. -webkit-border-before Non-standard
      2. -webkit-box-reflect Non-standard
      3. -webkit-line-clamp
      4. -webkit-mask-box-image Non-standard
      5. -webkit-mask-composite Non-standard
      6. -webkit-mask-position-x Non-standard
      7. -webkit-mask-position-y Non-standard
      8. -webkit-mask-repeat-x Non-standard
      9. -webkit-mask-repeat-y Non-standard
      10. -webkit-tap-highlight-color Non-standard
      11. -webkit-text-fill-color
      12. -webkit-text-security Non-standard
      13. -webkit-text-stroke
      14. -webkit-text-stroke-color
      15. -webkit-text-stroke-width
      16. -webkit-touch-callout Non-standard
   3. accent-color
   4. align-*
      1. align-content
      2. align-items
      3. align-self
   5. all
   6. anchor-name Experimental
   7. animation-*
      1. animation
      2. animation-composition
      3. animation-delay
      4. animation-direction
      5. animation-duration
      6. animation-fill-mode
      7. animation-iteration-count
      8. animation-name
      9. animation-play-state
      10. animation-range Experimental
      11. animation-range-end Experimental
      12. animation-range-start Experimental
      13. animation-timeline Experimental
      14. animation-timing-function
   8. appearance
   9. aspect-ratio
   10. backdrop-filter
   11. backface-visibility
   12. background-*
       1. background
       2. background-attachment
       3. background-blend-mode
       4. background-clip
       5. background-color
       6. background-image
       7. background-origin
       8. background-position
       9. background-position-x
       10. background-position-y
       11. background-repeat
       12. background-size
   13. block-size
   14. border-*
       1. border
       2. border-block
       3. border-block-color
       4. border-block-end
       5. border-block-end-color
       6. border-block-end-style
       7. border-block-end-width
       8. border-block-start
       9. border-block-start-color
       10. border-block-start-style
       11. border-block-start-width
       12. border-block-style
       13. border-block-width
       14. border-bottom
       15. border-bottom-color
       16. border-bottom-left-radius
       17. border-bottom-right-radius
       18. border-bottom-style
       19. border-bottom-width
       20. border-collapse
       21. border-color
       22. border-end-end-radius
       23. border-end-start-radius
       24. border-image
       25. border-image-outset
       26. border-image-repeat
       27. border-image-slice
       28. border-image-source
       29. border-image-width
       30. border-inline
       31. border-inline-color
       32. border-inline-end
       33. border-inline-end-color
       34. border-inline-end-style
       35. border-inline-end-width
       36. border-inline-start
       37. border-inline-start-color
       38. border-inline-start-style
       39. border-inline-start-width
       40. border-inline-style
       41. border-inline-width
       42. border-left
       43. border-left-color
       44. border-left-style
       45. border-left-width
       46. border-radius
       47. border-right
       48. border-right-color
       49. border-right-style
       50. border-right-width
       51. border-spacing
       52. border-start-end-radius
       53. border-start-start-radius
       54. border-style
       55. border-top
       56. border-top-color
       57. border-top-left-radius
       58. border-top-right-radius
       59. border-top-style
       60. border-top-width
       61. border-width
   15. bottom
   16. box-*
       1. box-align Non-standard Deprecated
       2. box-decoration-break
       3. box-direction Non-standard Deprecated
       4. box-flex Non-standard Deprecated
       5. box-flex-group Non-standard Deprecated
       6. box-lines Non-standard Deprecated
       7. box-ordinal-group Non-standard Deprecated
       8. box-orient Non-standard Deprecated
       9. box-pack Non-standard Deprecated
       10. box-shadow
       11. box-sizing
   17. break-*
       1. break-after
       2. break-before
       3. break-inside
   18. caption-side
   19. caret-color
   20. clear
   21. clip-*
       1. clip Deprecated
       2. clip-path
       3. clip-rule
   22. color-*
       1. color
       2. color-interpolation
       3. color-interpolation-filters
       4. color-scheme
   23. column-*
       1. column-count
       2. column-fill
       3. column-gap
       4. column-rule
       5. column-rule-color
       6. column-rule-style
       7. column-rule-width
       8. column-span
       9. column-width
   24. columns
   25. contain-*
       1. contain
       2. contain-intrinsic-block-size
       3. contain-intrinsic-height
       4. contain-intrinsic-inline-size
       5. contain-intrinsic-size
       6. contain-intrinsic-width
   26. container-*
       1. container
       2. container-name
       3. container-type
   27. content
   28. content-visibility
   29. counter-*
       1. counter-increment
       2. counter-reset
       3. counter-set
   30. cursor
   31. cx
   32. cy
   33. d
   34. direction
   35. display
   36. dominant-baseline
   37. empty-cells
   38. field-sizing Experimental
   39. fill-*
       1. fill
       2. fill-opacity
       3. fill-rule
   40. filter
   41. flex-*
       1. flex
       2. flex-basis
       3. flex-direction
       4. flex-flow
       5. flex-grow
       6. flex-shrink
       7. flex-wrap
   42. float
   43. flood-color
   44. flood-opacity
   45. font-*
       1. font
       2. font-family
       3. font-feature-settings
       4. font-kerning
       5. font-language-override
       6. font-optical-sizing
       7. font-palette
       8. font-size
       9. font-size-adjust
       10. font-smooth Non-standard
       11. font-stretch
       12. font-style
       13. font-synthesis
       14. font-synthesis-position Experimental
       15. font-synthesis-small-caps
       16. font-synthesis-style
       17. font-synthesis-weight
       18. font-variant
       19. font-variant-alternates
       20. font-variant-caps
       21. font-variant-east-asian
       22. font-variant-emoji
       23. font-variant-ligatures
       24. font-variant-numeric
       25. font-variant-position
       26. font-variation-settings
       27. font-weight
   46. forced-color-adjust
   47. gap
   48. grid-*
       1. grid
       2. grid-area
       3. grid-auto-columns
       4. grid-auto-flow
       5. grid-auto-rows
       6. grid-column
       7. grid-column-end
       8. grid-column-start
       9. grid-row
       10. grid-row-end
       11. grid-row-start
       12. grid-template
       13. grid-template-areas
       14. grid-template-columns
       15. grid-template-rows
   49. hanging-punctuation
   50. height
   51. hyphenate-character
   52. hyphenate-limit-chars
   53. hyphens
   54. image-*
       1. image-orientation
       2. image-rendering
       3. image-resolution Experimental
   55. initial-letter
   56. inline-size
   57. inset-*
       1. inset
       2. inset-block
       3. inset-block-end
       4. inset-block-start
       5. inset-inline
       6. inset-inline-end
       7. inset-inline-start
   58. interpolate-size Experimental
   59. isolation
   60. justify-*
       1. justify-content
       2. justify-items
       3. justify-self
   61. left
   62. letter-spacing
   63. lighting-color
   64. line-*
       1. line-break
       2. line-height
       3. line-height-step Experimental
   65. list-*
       1. list-style
       2. list-style-image
       3. list-style-position
       4. list-style-type
   66. margin-*
       1. margin
       2. margin-block
       3. margin-block-end
       4. margin-block-start
       5. margin-bottom
       6. margin-inline
       7. margin-inline-end
       8. margin-inline-start
       9. margin-left
       10. margin-right
       11. margin-top
       12. margin-trim Experimental
   67. marker-*
       1. marker
       2. marker-end
       3. marker-mid
       4. marker-start
   68. mask-*
       1. mask
       2. mask-border
       3. mask-border-mode
       4. mask-border-outset
       5. mask-border-repeat
       6. mask-border-slice
       7. mask-border-source
       8. mask-border-width
       9. mask-clip
       10. mask-composite
       11. mask-image
       12. mask-mode
       13. mask-origin
       14. mask-position
       15. mask-repeat
       16. mask-size
       17. mask-type
   69. math-*
       1. math-depth
       2. math-shift Experimental
       3. math-style
   70. max-*
       1. max-block-size
       2. max-height
       3. max-inline-size
       4. max-width
   71. min-*
       1. min-block-size
       2. min-height
       3. min-inline-size
       4. min-width
   72. mix-blend-mode
   73. object-fit
   74. object-position
   75. offset-*
       1. offset
       2. offset-anchor
       3. offset-distance
       4. offset-path
       5. offset-position
       6. offset-rotate
   76. opacity
   77. order
   78. orphans
   79. outline-*
       1. outline
       2. outline-color
       3. outline-offset
       4. outline-style
       5. outline-width
   80. overflow-*
       1. overflow
       2. overflow-anchor
       3. overflow-block
       4. overflow-clip-margin
       5. overflow-inline
       6. overflow-wrap
       7. overflow-x
       8. overflow-y
   81. overlay Experimental
   82. overscroll-*
       1. overscroll-behavior
       2. overscroll-behavior-block
       3. overscroll-behavior-inline
       4. overscroll-behavior-x
       5. overscroll-behavior-y
   83. padding-*
       1. padding
       2. padding-block
       3. padding-block-end
       4. padding-block-start
       5. padding-bottom
       6. padding-inline
       7. padding-inline-end
       8. padding-inline-start
       9. padding-left
       10. padding-right
       11. padding-top
   84. page-*
       1. page
       2. page-break-after
       3. page-break-before
       4. page-break-inside
   85. paint-order
   86. perspective
   87. perspective-origin
   88. place-*
       1. place-content
       2. place-items
       3. place-self
   89. pointer-events
   90. position-*
       1. position
       2. position-anchor Experimental
       3. position-area Experimental
       4. position-try Experimental
       5. position-try-fallbacks Experimental
       6. position-try-order Experimental
       7. position-visibility Experimental
   91. print-color-adjust
   92. quotes
   93. r
   94. resize
   95. right
   96. rotate
   97. row-gap
   98. ruby-align
   99. ruby-position
   100. rx
   101. ry
   102. scale
   103. scroll-*
        1. scroll-behavior
        2. scroll-margin
        3. scroll-margin-block
        4. scroll-margin-block-end
        5. scroll-margin-block-start
        6. scroll-margin-bottom
        7. scroll-margin-inline
        8. scroll-margin-inline-end
        9. scroll-margin-inline-start
        10. scroll-margin-left
        11. scroll-margin-right
        12. scroll-margin-top
        13. scroll-padding
        14. scroll-padding-block
        15. scroll-padding-block-end
        16. scroll-padding-block-start
        17. scroll-padding-bottom
        18. scroll-padding-inline
        19. scroll-padding-inline-end
        20. scroll-padding-inline-start
        21. scroll-padding-left
        22. scroll-padding-right
        23. scroll-padding-top
        24. scroll-snap-align
        25. scroll-snap-stop
        26. scroll-snap-type
        27. scroll-timeline Experimental
        28. scroll-timeline-axis Experimental
        29. scroll-timeline-name Experimental
   104. scrollbar-*
        1. scrollbar-color
        2. scrollbar-gutter
        3. scrollbar-width
   105. shape-*
        1. shape-image-threshold
        2. shape-margin
        3. shape-outside
        4. shape-rendering
   106. stop-color
   107. stop-opacity
   108. stroke-*
        1. stroke
        2. stroke-dasharray
        3. stroke-dashoffset
        4. stroke-linecap
        5. stroke-linejoin
        6. stroke-miterlimit
        7. stroke-opacity
        8. stroke-width
   109. tab-size
   110. table-layout
   111. text-*
        1. text-align
        2. text-align-last
        3. text-anchor
        4. text-combine-upright
        5. text-decoration
        6. text-decoration-color
        7. text-decoration-line
        8. text-decoration-skip Experimental
        9. text-decoration-skip-ink
        10. text-decoration-style
        11. text-decoration-thickness
        12. text-emphasis
        13. text-emphasis-color
        14. text-emphasis-position
        15. text-emphasis-style
        16. text-indent
        17. text-justify
        18. text-orientation
        19. text-overflow
        20. text-rendering
        21. text-shadow
        22. text-size-adjust Experimental
        23. text-spacing-trim Experimental
        24. text-transform
        25. text-underline-offset
        26. text-underline-position
        27. text-wrap
        28. text-wrap-mode
        29. text-wrap-style
   112. timeline-scope Experimental
   113. top
   114. touch-action
   115. transform-*
        1. transform
        2. transform-box
        3. transform-origin
        4. transform-style
   116. transition-*
        1. transition
        2. transition-behavior
        3. transition-delay
        4. transition-duration
        5. transition-property
        6. transition-timing-function
   117. translate
   118. unicode-bidi
   119. user-modify Non-standard Deprecated
   120. user-select
   121. vector-effect
   122. vertical-align
   123. view-*
        1. view-timeline Experimental
        2. view-timeline-axis Experimental
        3. view-timeline-inset Experimental
        4. view-timeline-name Experimental
        5. view-transition-name
   124. visibility
   125. white-space
   126. white-space-collapse
   127. widows
   128. width
   129. will-change
   130. word-break
   131. word-spacing
   132. writing-mode
   133. x
   134. y
   135. z-index
   136. zoom
10. Selectors
    1. & nesting selector
    2. Attribute selectors
    3. Class selectors
    4. ID selectors
    5. Type selectors
    6. Universal selectors
11. Combinators
    1. Child combinator
    2. Column combinator Experimental
    3. Descendant combinator
    4. Namespace separator
    5. Next-sibling combinator
    6. Selector list
    7. Subsequent-sibling combinator
12. Pseudo-classes
    1. :-moz-broken Non-standard Deprecated
    2. :-moz-drag-over Non-standard
    3. :-moz-first-node Experimental Non-standard
    4. :-moz-handler-blocked Non-standard
    5. :-moz-handler-crashed Non-standard
    6. :-moz-handler-disabled Non-standard
    7. :-moz-last-node Experimental Non-standard
    8. :-moz-loading Non-standard
    9. :-moz-locale-dir(ltr) Non-standard
    10. :-moz-locale-dir(rtl) Non-standard
    11. :-moz-only-whitespace Non-standard
    12. :-moz-submit-invalid Non-standard
    13. :-moz-suppressed Non-standard
    14. :-moz-user-disabled Non-standard
    15. :-moz-window-inactive Non-standard
    16. :active
    17. :any-link
    18. :autofill
    19. :blank Experimental
    20. :buffering
    21. :checked
    22. :current Experimental
    23. :default
    24. :defined
    25. :dir()
    26. :disabled
    27. :empty
    28. :enabled
    29. :first
    30. :first-child
    31. :first-of-type
    32. :focus
    33. :focus-visible
    34. :focus-within
    35. :fullscreen
    36. :future
    37. :has-slotted Experimental
    38. :has()
    39. :host
    40. :host-context()
    41. :host()
    42. :hover
    43. :in-range
    44. :indeterminate
    45. :invalid
    46. :is()
    47. :lang()
    48. :last-child
    49. :last-of-type
    50. :left
    51. :link
    52. :local-link Experimental
    53. :modal
    54. :muted
    55. :not()
    56. :nth-child()
    57. :nth-last-child()
    58. :nth-last-of-type()
    59. :nth-of-type()
    60. :only-child
    61. :only-of-type
    62. :optional
    63. :out-of-range
    64. :past
    65. :paused
    66. :picture-in-picture
    67. :placeholder-shown
    68. :playing
    69. :popover-open
    70. :read-only
    71. :read-write
    72. :required
    73. :right
    74. :root
    75. :scope
    76. :seeking
    77. :stalled
    78. :state()
    79. :target
    80. :target-within Experimental
    81. :user-invalid
    82. :user-valid
    83. :valid
    84. :visited
    85. :volume-locked
    86. :where()
13. Pseudo-elements
    1. ::-moz-color-swatch Non-standard
    2. ::-moz-focus-inner Experimental Non-standard
    3. ::-moz-list-bullet Experimental Non-standard
    4. ::-moz-list-number Experimental Non-standard
    5. ::-moz-meter-bar Non-standard
    6. ::-moz-progress-bar Experimental Non-standard
    7. ::-moz-range-progress Non-standard
    8. ::-moz-range-thumb Non-standard
    9. ::-moz-range-track Non-standard
    10. ::-webkit-inner-spin-button Non-standard
    11. ::-webkit-meter-bar Non-standard Deprecated
    12. ::-webkit-meter-even-less-good-value Non-standard
    13. ::-webkit-meter-inner-element Non-standard
    14. ::-webkit-meter-optimum-value Non-standard
    15. ::-webkit-meter-suboptimum-value Non-standard
    16. ::-webkit-progress-bar Non-standard
    17. ::-webkit-progress-inner-element Non-standard
    18. ::-webkit-progress-value Non-standard
    19. ::-webkit-scrollbar Non-standard
    20. ::-webkit-search-cancel-button Non-standard
    21. ::-webkit-search-results-button Non-standard
    22. ::-webkit-slider-runnable-track Experimental Non-standard
    23. ::-webkit-slider-thumb Experimental Non-standard
    24. ::after
    25. ::backdrop
    26. ::before
    27. ::cue
    28. ::file-selector-button
    29. ::first-letter
    30. ::first-line
    31. ::grammar-error
    32. ::highlight()
    33. ::marker
    34. ::part()
    35. ::placeholder
    36. ::selection
    37. ::slotted()
    38. ::spelling-error
    39. ::target-text
    40. ::view-transition
    41. ::view-transition-group
    42. ::view-transition-image-pair
    43. ::view-transition-new
    44. ::view-transition-old
14. At-rules
    1. @charset
    2. @color-profile
    3. @container
    4. @counter-style
    5. @document Non-standard Deprecated
    6. @font-face
    7. @font-feature-values
    8. @font-palette-values
    9. @import
    10. @keyframes
    11. @layer
    12. @media
    13. @namespace
    14. @page
    15. @position-try Experimental
    16. @property
    17. @scope
    18. @starting-style
    19. @supports
    20. @view-transition
15. Functions
    1. -moz-image-rect Non-standard Deprecated
    2. abs()
    3. acos()
    4. anchor-size() Experimental
    5. anchor() Experimental
    6. asin()
    7. atan()
    8. atan2()
    9. attr()
    10. calc-size() Experimental
    11. calc()
    12. clamp()
    13. cos()
    14. counter()
    15. counters()
    16. cross-fade()
    17. element() Experimental
    18. env()
    19. exp()
    20. fit-content()
    21. hypot()
    22. log()
    23. max()
    24. min()
    25. minmax()
    26. mod()
    27. pow()
    28. ray()
    29. rem()
    30. repeat()
    31. round()
    32. sign()
    33. sin()
    34. sqrt()
    35. symbols()
    36. tan()
    37. url()
    38. var()
16. Types
    1. <absolute-size>
    2. <alpha-value>
    3. <angle-percentage>
    4. <angle>
    5. <basic-shape>
    6. <blend-mode>
    7. <box-edge>
    8. <calc-keyword>
    9. <calc-sum>
    10. <color-interpolation-method>
    11. <color>
    12. <custom-ident>
    13. <dashed-ident>
    14. <dimension>
    15. <display-box>
    16. <display-inside>
    17. <display-internal>
    18. <display-legacy>
    19. <display-listitem>
    20. <display-outside>
    21. <easing-function>
    22. <filter-function>
    23. <flex>
    24. <frequency-percentage>
    25. <frequency>
    26. <generic-family>
    27. <gradient>
    28. <hex-color>
    29. <hue-interpolation-method>
    30. <hue>
    31. <ident>
    32. <image>
    33. <integer>
    34. <length-percentage>
    35. <length>
    36. <line-style>
    37. <named-color>
    38. <number>
    39. <overflow>
    40. <percentage>
    41. <position-area> Experimental
    42. <position>
    43. <ratio>
    44. <relative-size>
    45. <resolution>
    46. <shape> Deprecated
    47. <string>
    48. <system-color>
    49. <time-percentage>
    50. <time>
    51. <transform-function>
    52. <url>
17. Guides
18. Animations
    1. Using CSS animations
19. Backgrounds and Borders
    1. Using multiple backgrounds
    2. Resizing background images
20. Box alignment
    1. Box alignment in block layout
    2. Box alignment in flexbox
    3. Box alignment in grid layout
    4. Box alignment in multi-column layout
21. Box model
    1. Introduction to the CSS basic box model
    2. Mastering margin collapsing
22. Colors
    1. Applying_color_to_HTML_elements
    2. Color values
    3. Using relative colors
    4. Using color wisely
    5. Accessibility_Understanding_colors_and_luminance"
    6. Accessibility: Color contrast
23. Columns
    1. Basic concepts of multi-column layout
    2. Styling columns
    3. Spanning and balancing columns
    4. Handling overflow in multi-column layout
    5. Handling content breaks in multi-column layout
24. Conditional rules
    1. Using feature queries
25. Containment
    1. Using CSS containment
    2. CSS container queries
    3. Using container size and style queries
26. CSSOM view
    1. Coordinate systems
27. Flexbox
    1. Basic concepts of flexbox
    2. Relationship of flexbox to other layout methods
    3. Aligning items in a flex container
    4. Ordering flex items
    5. Controlling ratios of flex items along the main axis
    6. Mastering wrapping of flex items
    7. Typical use cases of flexbox
28. Flow layout
    1. Block and inline layout in normal flow
    2. In flow and out of flow
    3. Introduction to formatting contexts
    4. Flow layout and writing modes
    5. Flow layout and overflow
29. Fonts
    1. OpenType font features guide
    2. Variable fonts guide
30. Grid
    1. Basic concepts of grid layout
    2. Relationship of grid layout to other layout methods
    3. Grid layout using line-based placement
    4. Grid template areas
    5. Layout using named grid lines
    6. Auto-placement in grid layout
    7. Box alignment in grid layout
    8. Grids, logical values, and writing modes
    9. Grid layout and accessibility
    10. CSS grid layout and progressive enhancement
    11. Realizing common layouts using grids
    12. Subgrid
    13. Masonry layout Experimental
31. Images
    1. Using CSS gradients
32. Lists and counters
    1. Using CSS counters
    2. Consistent list indentation
33. Logical properties
    1. Basic concepts of logical properties and values
    2. Logical properties for floating and positioning
    3. Logical properties for margins, borders, and padding
    4. Logical properties for sizing
34. Math functions
    1. Using CSS math functions
35. Media queries
    1. Using media queries
    2. Using media queries for accessibility
    3. Testing media queries programmatically
    4. Printing
36. Nesting style rules
    1. Using CSS nesting
    2. CSS nesting at-rules
    3. CSS nesting and specificity
37. Positioning
    1. Understanding z-index
38. Scroll snap
    1. Basic concepts of scroll snap
39. Shapes
    1. Overview of shapes
    2. Shapes from box values
    3. Basic shapes with shape-outside
    4. Shapes from images
40. Text
    1. Wrapping and breaking text
41. Transforms
    1. Using CSS transforms
42. Transitions
    1. Using CSS transitions
43. CSS Layout cookbook
44. 1. Recipe: Media objects
    2. Column layouts
    3. Center an element
    4. Sticky footers
    5. Split navigation
    6. Breadcrumb navigation
    7. List group with badges
    8. Pagination
    9. Card
    10. Grid wrapper
45. Tools
46. 1. Color picker tool
    2. Box-shadow generator
    3. Border-image generator
    4. Border-radius generator

• Try it
• Syntax
• Accessibility
• Formal definition
• Formal syntax
• Examples
• Specifications
• Browser compatibility
• See also

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

Try it

The marker will be currentcolor, the same as the computed color of the element it applies to.

Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.

Syntax

css/* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: kannada; /* <string> value */ list-style-type: "-"; /* Identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* Keyword value */ list-style-type: none; /* Global values */ list-style-type: inherit; list-style-type: initial; list-style-type: revert; list-style-type: revert-layer; list-style-type: unset;

The list-style-type property may be defined as any one of:

• a <custom-ident> value,
• a symbols() value,
• a <string> value, or
• the keyword none.

Note that:

• Some types require a suitable font installed to display as expected.
• The cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons.

Values

<custom-ident>

An identifier matching the value of a @counter-style or one of the predefined styles:

symbols()

Defines an anonymous style of the list.

<string>

The specified string will be used as the item's marker.

none

No item marker is shown.

disc

A filled circle (default value).

circle

A hollow circle.

square

A filled square.

decimal

Decimal numbers, beginning with 1.

cjk-decimal

Han decimal numbers.

decimal-leading-zero

Decimal numbers, padded by initial zeros.

lower-roman

Lowercase roman numerals.

upper-roman

Uppercase roman numerals.

lower-greek

Lowercase classical Greek.

lower-alpha, lower-latin

Lowercase ASCII letters.

upper-alpha, upper-latin

Uppercase ASCII letters.

arabic-indic, -moz-arabic-indic

Arabic-Indic numbers.

armenian

Traditional Armenian numbering.

bengali, -moz-bengali

Bengali numbering.

cambodian/khmer

Cambodian/Khmer numbering.

cjk-earthly-branch, -moz-cjk-earthly-branch

Han "Earthly Branch" ordinals.

cjk-heavenly-stem, -moz-cjk-heavenly-stem

Han "Heavenly Stem" ordinals.

cjk-ideographic

Identical to trad-chinese-informal.

devanagari, -moz-devanagari

Devanagari numbering.

ethiopic-numeric

Ethiopic numbering.

georgian

Traditional Georgian numbering.

gujarati, -moz-gujarati

Gujarati numbering.

gurmukhi, -moz-gurmukhi

Gurmukhi numbering.

hebrew

Traditional Hebrew numbering.

hiragana

Dictionary-order hiragana lettering.

hiragana-iroha

Iroha-order hiragana lettering.

japanese-formal

Japanese formal numbering to be used in legal or financial documents. The kanjis are designed so that they can't be modified to look like another correct one.

japanese-informal

Japanese informal numbering.

kannada, -moz-kannada

Kannada numbering.

katakana

Dictionary-order katakana lettering.

katakana-iroha

Iroha-order katakana lettering.

korean-hangul-formal

Korean hangul numbering.

korean-hanja-formal

Formal Korean Han numbering.

korean-hanja-informal

Korean hanja numbering.

lao, -moz-lao

Laotian numbering.

lower-armenian

Lowercase Armenian numbering.

malayalam, -moz-malayalam

Malayalam numbering.

mongolian

Mongolian numbering.

myanmar, -moz-myanmar

Myanmar (Burmese) numbering.

oriya, -moz-oriya

Oriya numbering.

persian, -moz-persian

Persian numbering.

simp-chinese-formal

Simplified Chinese formal numbering.

simp-chinese-informal

Simplified Chinese informal numbering.

tamil, -moz-tamil

Tamil numbering.

telugu, -moz-telugu

Telugu numbering.

thai, -moz-thai

Thai numbering.

tibetan

Tibetan numbering.

trad-chinese-formal

Traditional Chinese formal numbering.

trad-chinese-informal

Traditional Chinese informal numbering.

upper-armenian

Traditional uppercase Armenian numbering.

disclosure-open

Symbol indicating that a disclosure widget such as <details> is opened.

disclosure-closed

Symbol indicating that a disclosure widget, like <details> is closed.

Refer to the All list style types example to see the above values in action. Details of all the available counter styles used by various cultures around the world can be found in Ready-made Counter Styles.

Non-standard extensions

A few predefined types are supported by Mozilla (Firefox) with a -moz- prefix.

• ethiopic-halehame: -moz-ethiopic-halehame
• ethiopic-halehame-am: -moz-ethiopic-halehame-am
• ethiopic-halehame-ti-er: -moz-ethiopic-halehame-ti-er
• ethiopic-halehame-ti-et: -moz-ethiopic-halehame-ti-et
• ethiopic-numeric: -moz-ethiopic-numeric
• hangul: -moz-hangul
• hangul-consonant: -moz-hangul-consonant
• urdu: -moz-urdu

See the compatibility table to check which browsers support which extension.

Accessibility

Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style-type value of none. This can be resolved by adding role="list" to the list's opening tag. To learn more about this and potential workarounds, see list-style.

Formal definition

Initial value	disc
Applies to	list items
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

list-style-type = <counter-style> | <string> | none <counter-style> = <counter-style-name> | <symbols()> <symbols()> = symbols( <symbols-type>? [ <string> | <image> ]+ ) <symbols-type> = cyclic | numeric | alphabetic | symbolic | fixed <image> = <url> | <gradient> <url> = <url()> | <src()> <url()> = url( <string> <url-modifier>* ) | <url-token> <src()> = src( <string> <url-modifier>* )

Examples

Setting list item markers

HTML

htmlList 1 <ol class="normal"> <li>Hello</li> <li>World</li> <li>What's up?</li> </ol> List 2 <ol class="shortcut"> <li>Looks</li> <li>Like</li> <li>The</li> <li>Same</li> </ol>

CSS

cssol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; }

Result

All list style types

HTML

html<ol> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ol> <h2>Choose a list style type:</h2> <div class="container"> <label for="disc"> <input type="radio" id="disc" name="type" value="disc" />disc </label> <label for="circle"> <input type="radio" id="circle" name="type" value="circle" />circle </label> <label for="square"> <input type="radio" id="square" name="type" value="square" />square </label> <label for="decimal"> <input type="radio" id="decimal" name="type" value="decimal" />decimal </label> <label for="cjk-decimal"> <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal" />cjk-decimal </label> <label for="decimal-leading-zero"> <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero" />decimal-leading-zero </label> <label for="lower-roman"> <input type="radio" id="lower-roman" name="type" value="lower-roman" />lower-roman </label> <label for="upper-roman"> <input type="radio" id="upper-roman" name="type" value="upper-roman" />upper-roman </label> <label for="lower-greek"> <input type="radio" id="lower-greek" name="type" value="lower-greek" />lower-greek </label> <label for="lower-alpha"> <input type="radio" id="lower-alpha" name="type" value="lower-alpha" />lower-alpha, lower-latin </label> <label for="upper-alpha"> <input type="radio" id="upper-alpha" name="type" value="upper-alpha" />upper-alpha, upper-latin </label> <label for="arabic-indic"> <input type="radio" id="arabic-indic" name="type" value="arabic-indic" />arabic-indic </label> <label for="armenian"> <input type="radio" id="armenian" name="type" value="armenian" />armenian </label> <label for="bengali"> <input type="radio" id="bengali" name="type" value="bengali" />bengali </label> <label for="cambodian"> <input type="radio" id="cambodian" name="type" value="cambodian" />cambodian </label> <label for="cjk-earthly-branch"> <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch" />cjk-earthly-branch </label> <label for="cjk-heavenly-stem"> <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem" />cjk-heavenly-stem </label> <label for="cjk-ideographic"> <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic" />cjk-ideographic </label> <label for="devanagari"> <input type="radio" id="devanagari" name="type" value="devanagari" />devanagari </label> <label for="ethiopic-numeric"> <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric" />ethiopic-numeric </label> <label for="georgian"> <input type="radio" id="georgian" name="type" value="georgian" />georgian </label> <label for="gujarati"> <input type="radio" id="gujarati" name="type" value="gujarati" />gujarati </label> <label for="gurmukhi"> <input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi </label> <label for="hebrew"> <input type="radio" id="hebrew" name="type" value="hebrew" />hebrew </label> <label for="hiragana"> <input type="radio" id="hiragana" name="type" value="hiragana" />hiragana </label> <label for="hiragana-iroha"> <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha" />hiragana-iroha </label> <label for="japanese-formal"> <input type="radio" id="japanese-formal" name="type" value="japanese-formal" />japanese-formal </label> <label for="japanese-informal"> <input type="radio" id="japanese-informal" name="type" value="japanese-informal" />japanese-informal </label> <label for="kannada"> <input type="radio" id="kannada" name="type" value="kannada" />kannada </label> <label for="katakana"> <input type="radio" id="katakana" name="type" value="katakana" />katakana </label> <label for="katakana-iroha"> <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha" />katakana-iroha </label> <label for="khmer"> <input type="radio" id="khmer" name="type" value="khmer" />khmer </label> <label for="korean-hangul-formal"> <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal" />korean-hangul-formal </label> <label for="korean-hanja-formal"> <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal" />korean-hanja-formal </label> <label for="korean-hanja-informal"> <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal" />korean-hanja-informal </label> <label for="lao"> <input type="radio" id="lao" name="type" value="lao" />lao </label> <label for="lower-armenian"> <input type="radio" id="lower-armenian" name="type" value="lower-armenian" />lower-armenian </label> <label for="malayalam"> <input type="radio" id="malayalam" name="type" value="malayalam" />malayalam </label> <label for="mongolian"> <input type="radio" id="mongolian" name="type" value="mongolian" />mongolian </label> <label for="myanmar"> <input type="radio" id="myanmar" name="type" value="myanmar" />myanmar </label> <label for="oriya"> <input type="radio" id="oriya" name="type" value="oriya" />oriya </label> <label for="persian"> <input type="radio" id="persian" name="type" value="persian" />persian </label> <label for="simp-chinese-formal"> <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal" />simp-chinese-formal </label> <label for="simp-chinese-informal"> <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal" />simp-chinese-informal </label> <label for="tamil"> <input type="radio" id="tamil" name="type" value="tamil" />tamil </label> <label for="telugu"> <input type="radio" id="telugu" name="type" value="telugu" />telugu </label> <label for="thai"> <input type="radio" id="thai" name="type" value="thai" />thai </label> <label for="tibetan"> <input type="radio" id="tibetan" name="type" value="tibetan" />tibetan </label> <label for="trad-chinese-formal"> <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal" />trad-chinese-formal </label> <label for="trad-chinese-informal"> <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal" />trad-chinese-informal </label> <label for="upper-armenian"> <input type="radio" id="upper-armenian" name="type" value="upper-armenian" />upper-armenian </label> <label for="disclosure-open"> <input type="radio" id="disclosure-open" name="type" value="disclosure-open" />disclosure-open </label> <label for="disclosure-closed"> <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed" />disclosure-closed </label> <label for="-moz-ethiopic-halehame"> <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame </label> <label for="-moz-ethiopic-halehame-am"> <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am </label> <label for="ethiopic-halehame-ti-er"> <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er </label> <label for="ethiopic-halehame-ti-et"> <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et </label> <label for="hangul"> <input type="radio" id="hangul" name="type" value="hangul" />hangul </label> <label for="hangul-consonant"> <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant" />hangul-consonant </label> <label for="urdu"> <input type="radio" id="urdu" name="type" value="urdu" />urdu </label> <label for="-moz-ethiopic-halehame-ti-er"> <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er </label> <label for="-moz-ethiopic-halehame-ti-et"> <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et </label> <label for="-moz-hangul"> <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul" />-moz-hangul </label> <label for="-moz-hangul-consonant"> <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant" />-moz-hangul-consonant </label> <label for="-moz-urdu"> <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu" />-moz-urdu </label> </div>

CSS

cssol { font-size: 1.2rem; } .container { column-count: 3; } label { display: block; } input { margin: 0.4rem; }

JavaScript

jsconst container = document.querySelector(".container"); const list = document.querySelector("ol"); container.addEventListener("change", (event) => { list.setAttribute("style", `list-style-type: ${event.target.value}`); });

Result

We're not limited to the list style types defined on this page or the specification. The @counter-style at-rule enables creating counters using any alphabet.

Specifications

Specification
CSS Lists and Counters Module Level 3 # text-markers
CSS Counter Styles Level 3 # extending-css2

Browser compatibility

BCD tables only load in the browser

See also

• list-style shorthand property
• list-style-image property
• list-style-position property
• ::marker pseudo-element
• CSS lists and counters module
• CSS counter styles module

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Sep 28, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content