CSS list-style Property

Last Updated : 11 Jul, 2025

The list-style property in CSS is used to set the list style. the CSS list-style property is a shorthand for setting the list-style-type, list-style-position, and list-style-image properties in one declaration. It defines the appearance of list item markers, including their type (e.g., disc, circle), position, and custom images.

Syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Property Values

Name	Description
list-style-type:	This value sets a list item element's marker (such as a disc, character, or custom counter style). Its default value is a disc.
list-style-position	This value sets the position of the marker relative to a list item. Its default value is "outside".
list-style-image	This value sets an image to be used as the list item marker. Its default value is "none".

We will understand the concepts of list-style property through the examples.

Methods to Use CSS List Style Property

1. Using list-style property value as Square

The CSS list-style property set to square renders square bullets for unordered lists (<ul>). It replaces default bullets with filled squares, enhancing visual presentation and list item differentiation on web pages.

Example 1: This example illustrates the use of the list-style property where the position value is set to inside.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style Property </title>
    <style>
        ul {
            list-style: square inside url(
"http://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS list-style Property
    </h2>

    <p>Sorting Algorithms</p>

    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>

</html>

Output:

liststyle

2. Using list-style property value as Square Outside

The CSS list-style property, set to square outside, places square bullets outside the list items in unordered lists (`<ul>`). This creates a clean and structured appearance with bullets neatly aligned outside list content.

Example 2: This example illustrates the use of the list-style property where the position value is set to outside.

HTML

<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style Property </title>
    <style>
        ul {
            list-style: square outside;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>
        CSS list-style Property
    </h2>

    <p>Sorting Algorithms</p>

    <ul>
        <li>Bubble Sort</li>
        <li>Selection Sort</li>
        <li>Merge Sort</li>
    </ul>
</body>

</html>