Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set image for bullet style with CSS
The list-style-image CSS property allows you to replace default bullet points with custom images, giving you complete control over list styling.
Syntax
list-style-image: url('path/to/image.png');
list-style-image: none; /* Default */
Basic Example
Here's how to set a custom bullet image for an unordered list:
<!DOCTYPE html>
<html>
<head>
<style>
.custom-bullets {
list-style-image: url('/images/arrow-bullet.png');
}
</style>
</head>
<body>
<ul class="custom-bullets">
<li>Football</li>
<li>Cricket</li>
<li>Basketball</li>
</ul>
</body>
</html>
Inline Style Example
You can also apply the image bullet directly using inline styles:
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul style="list-style-image: url('/images/star-bullet.png');">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</body>
</html>
Fallback with list-style-type
It's good practice to provide a fallback bullet style in case the image fails to load:
<!DOCTYPE html>
<html>
<head>
<style>
.safe-bullets {
list-style-type: disc; /* Fallback */
list-style-image: url('/images/custom-bullet.png');
}
</style>
</head>
<body>
<ul class="safe-bullets">
<li>Primary Item</li>
<li>Secondary Item</li>
</ul>
</body>
</html>
Key Points
- Image size should be small (typically 8-16px) for best results
- Use PNG or GIF formats for transparency support
- Always provide a fallback with
list-style-type - Works with both relative and absolute image paths
Conclusion
The list-style-image property provides an easy way to customize bullet points with images. Remember to use appropriately sized images and include fallback styling for better user experience.
Updated on: 2026-03-15T23:18:59+05:30
550 Views
Advertisements