CSS list-style-image Property

Description

The list-style-image CSS property is used to specify a custom image as a bullet point marker for list items in HTML. Instead of the default disc or square bullets, you can use this property to set an image, typically in the form of a URL, to serve as the marker for unordered lists (ul elements) or as a custom marker for ordered lists (ol elements). This property allows web designers to add a personalized touch to lists, making them visually distinctive and aligned with the overall design of a web page. It offers flexibility in terms of design, enabling the use of various graphics or icons as list item markers.

Initial value: none
Applies to: List item elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.listStyleImage

Interactive Demo

list-style-image: url('images/tick.png');

list-style-image: none;

Australia
New Zealand
United States
United Kingdom
India

Syntax

list-style-image: <image> | none

Values

noneNo image is specified.
<image>Location of image to use as the marker.
inherit

Example

HTML

<ul class="test"> 

   <li>List Element</li>  

   <li>List Element</li>  

   <li>List Element</li> 

</ul>

CSS

.test {
   list-style-image: url('images/question.png') ;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS list-style-image 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

Support Us