Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to control the shape or appearance of the marker with CSS?

Javascript Web Development Front End Scripts

The list-style-type CSS property allows you to control the shape or appearance of list markers in both ordered and unordered lists. This property provides various built-in marker styles to enhance your list presentations.

Syntax

list-style-type: value;

Common Values for Unordered Lists

<!DOCTYPE html>
<html>
<head>
    <title>List Style Types</title>
</head>
<body>
    <h3>Circle Markers</h3>
    <ul style="list-style-type: circle;">
        <li>Apple</li>
        <li>Mango</li>
        <li>Grapes</li>
    </ul>
    
    <h3>Square Markers</h3>
    <ul style="list-style-type: square;">
        <li>Red</li>
        <li>Blue</li>
        <li>Green</li>
    </ul>
    
    <h3>No Markers</h3>
    <ul style="list-style-type: none;">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Common Values for Ordered Lists

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List Styles</title>
</head>
<body>
    <h3>Roman Numerals</h3>
    <ol style="list-style-type: upper-roman;">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>
    
    <h3>Alphabetical</h3>
    <ol style="list-style-type: upper-alpha;">
        <li>Introduction</li>
        <li>Main Content</li>
        <li>Conclusion</li>
    </ol>
</body>
</html>

Available Values

Value Description Example
disc Default filled circle (?) ? Item
circle Empty circle (?) ? Item
square Filled square (?) ? Item
decimal Numbers (1, 2, 3...) 1. Item
upper-roman Uppercase Roman (I, II, III...) I. Item
lower-alpha Lowercase letters (a, b, c...) a. Item
none No marker Item

Using CSS Classes

<!DOCTYPE html>
<html>
<head>
    <style>
        .custom-list {
            list-style-type: square;
            color: blue;
        }
        
        .no-bullets {
            list-style-type: none;
            padding-left: 0;
        }
    </style>
</head>
<body>
    <ul class="custom-list">
        <li>Custom styled item</li>
        <li>Another item</li>
    </ul>
    
    <ul class="no-bullets">
        <li>Clean list item</li>
        <li>No marker here</li>
    </ul>
</body>
</html>

Conclusion

The list-style-type property provides flexible control over list markers. Use it with inline styles or CSS classes to customize your lists' appearance and improve document structure.

Updated on: 2026-03-15T23:18:59+05:30

224 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements