CSS list-style Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The list-style CSS property is used to control the appearance of list items in HTML documents. It allows you to specify the style, image, and position of list item markers, such as bullets for unordered lists or numbers for ordered lists. The list-style property can take three values: list-style-type, which defines the marker type (e.g., disc, circle, decimal); list-style-image, which allows you to use custom images as markers; and list-style-position, which determines whether the marker appears inside or outside the content box of the list item. By using the list-style property, you can customize the visual presentation of lists to better match your design preferences and the overall look of your web page. Individual properties are: list-style-type, list-style-image, and list-style-position.

Initial value
See individual properties
Applies to
List item elements
Inherited
Yes
Computed value
See individual properties
Animatable
No
JavaScript syntax
object.style.listStyle

Interactive Demo

  • Australia
  • New Zealand
  • United States
  • United Kingdom
  • India

Syntax

list-style: <list-style-type> || <list-style-position> || <list-style-image>

Values

Example

<ul class="test"> 
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
<ul class="test2">
<li>List Element</li>
<li>List Element</li>
<li>List Element</li>
</ul>
.test {
   list-style: square outside; 
}
.test2 {
   list-style: circle inside;
}

Browser Support

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

Desktop
Edge Chrome Firefox Opera Safari
121171
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 2nd January 2024