There are three different properties for styling list-items:

1. list-style-type (default: disc) 
2. list-style-image (default: outside) 
3. list-style-position (default: none) 

NOTE: above properties need to be declared in that order.

We can declare each property separately, or we can use list-style shorthand property.


list-style-type defines the shape/type of bullet point for each list-item.

We can add these values for list-style-type:

1. disc
2. circle
3. square
4. decimal
5. lower-roman
6. upper-roman
7. none


li {
 list-style-type: square;

li {
 list-style-type: circle;


If we want to display an image instead of bullet point, we can use  list-style-image.

We can pass URL or local image as value.

li {
 list-style-image: url(images/image.png);


It defines where to position the list-item marker. We can add two values, either "inside" or "outside".

li {
 list-style-position: outside;


Leave a reply

Your email address will not be published. required fields are marked *