In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > list-style

list-style property

Browser support:

Specifies up to three separate listStyle properties for an object.

With this property, you can set the type and position of the markers visible before every list element. Furthermore, you can set an image to display as a marker for the list. When the image is available, it will replace the marker set with the 'list-style-type' marker.

JavaScript page for this property: listStyle. You can find other example(s) there.

Possible values:

One of the following values:

•

Any of the following values (use the space character to separate them, each value can be used only once):

•	<list-style-type>
•	<list-style-position>
•	<list-style-image>

•

inherit

Description of values:

inherit

Takes the value of this property from the computed style of the parent element.

list-style-image

Specifies a graphic image for a list label.

list-style-position

Specifies whether the list marker for a list item should appear inside or outside the list-item box.

list-style-type

Specifies the style of the list marker bullet or numbering system within a list.

Default: disc outside none.

Example HTML code 1:

This example illustrates the use of the list-style property:

<head>
    <style>
        .example {
            list-style: inside square;
        }
    </style>
</head>
<body>
    <ol class="example">
        <li>Apple
        <li>Pear
        <li>Peach
    </ol>
</body>