CSS list-style-type Property

Description

The list-style-type property changes the appearance of the marker for each item in the list. This property is used only when the value of list-style-image is set to none. Markers differ for a bulleted list ( <ul> element) and a numbered list ( <ol> element).

Initial value

disc

Applies to

List item elements

Inherited

Yes

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.listStyleType

Interactive Demo

list-style-type: "--";

list-style-type: disc;

list-style-type: circle;

list-style-type: upper-roman;

list-style-type: "\1F438";

Syntax

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

Values

• discfilled circle.
• circlecircle
• squaresquare
• decimalnumber. 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

<ul>

   <li>List Element</li> 

   <li>List Element</li>  

   <li>List Element</li> 

</ul> 

<ol class="test"> 

   <li>List Element</li> 

   <li>List Element</li> 

   <li>List Element</li> 

</ol> 

<ul class="test2"> 

   <li>List Element</li> 

   <li>List Element</li> 

   <li>List Element</li> 

</ul> 

.test {
   list-style-type: lower-roman;
   color: orange;
}
.test2 {
   list-style-type : circle; 
   color: IndianRed;
}

Browser Support

The following table will show you the current browser support for the CSS list-style-type property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	10.1	1	1	37

Last updated by CSSPortal on: 2nd January 2024