Open In App

CSS list-style-image Property

Improve
Improve
Like Article
Like
Save
Share
Report

The list-style-image property in CSS is used to set the image that will be used as the list item marker. 

Syntax:

list-style-image: none|url|initial|inherit;

Property values:

  • none: This value specifies that no image is used as the marker. If this value is set, the marker defined in list-style-type is used instead. This is default value. 
  • initial: This mode sets this property to its default value. 
  • url: In this value the path to the image is used as a list-item marker. 

Example 1: In this example, we are using list-style-image: none; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS list-style-image Property
    </title>
    <style>
        ul {
            list-style-image: none;
        }
    </style>
</head>
 
<body style="">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        CSS list-style-image Property
    </h2>
 
    <p>Sorting Algorithms</p>
 
    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>
</html>


Output:

 liststyleimage

Example 2: In this example, we use list-style-image: url; property.

html




<!DOCTYPE html>
<html>
<head>
    <title>
        CSS list-style-image Property
    </title>
    <style>
        ul {
            list-style-image:
        }
    </style>
</head>
 
<body style="">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        CSS list-style-image Property
    </h2>
 
    <p>Sorting Algorithms</p>
 
    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>
</html>


Output:

 liststyleimage

Supported Browsers: The browser supported by list-style-image property are listed below:

  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 4.0 and above
  • Firefox 1.0 and above
  • Opera 7.0 and above
  • Apple Safari 1.0 and above


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads