CSS Lists

Written by Swapnil RajaUpdated 30 Jul 2026

The CSS Lists properties are used to customize the appearance of ordered and unordered lists.

The CSS Lists properties are used to customize the appearance of ordered (<ol>) and unordered (<ul>) lists.

By default, browsers display:

Unordered lists with bullets (•)
Ordered lists with numbers (1, 2, 3...)

CSS allows you to:

Change list marker styles
Use custom images as markers
Control marker position
Remove markers completely

List styling is commonly used in:

Navigation menus
Sidebars
Feature lists
Content sections

Syntax

CSS Lists Syntax

css

selector {
    list-style-type: value;
}

PreviousCSS Subgrid NextCSS Tables

Property	Description	Example
list-style-type	Sets marker type	list-style-type: square;
list-style-image	Uses an image as marker	list-style-image: url("icon.png");
list-style-position	Sets marker position	list-style-position: inside;
list-style	Shorthand property	list-style: square inside;
list-style-type: none	Removes markers	list-style-type: none;

CSS Lists Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Lists Example</title>
    <style>
        .square-list {
            list-style-type: square;
        }
        .roman-list {
            list-style-type: upper-roman;
        }
        .menu-list {
            list-style-type: none;
            padding: 0;
        }
        .menu-list li {
            display: inline-block;
            margin-right: 15px;
        }
    </style>
</head>
<body>
    <h2>Square List</h2>
    <ul class="square-list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <h2>Roman Number List</h2>
    <ol class="roman-list">
        <li>Introduction</li>
        <li>Syntax</li>
        <li>Examples</li>
    </ol>
    <h2>Navigation Menu</h2>
    <ul class="menu-list">
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
    </ul>
</body>
</html>

Value	Result
disc	●
circle	○
square	■
decimal	1, 2, 3
upper-roman	I, II, III
lower-alpha	a, b, c

CSS Lists

Syntax

Attributes

Example

Browser Support

Notes

Common List Style Types

Conclusion