CSS list-style Property
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
- <list-style-type>See list-style-type CSS property for values.
- <list-style-position>See list-style-position CSS property for values.
- <list-style-image>See list-style-image CSS property for values.
- inherit
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 7 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 1 | 1 | 4.4 |
Last updated by CSSPortal on: 2nd January 2024