list-style – CSS: Cascading Style Sheets

The list-style CSS shorthand property allows you to set all the list style properties at once.

Note: This property is applied to list items, i.e., elements with display: list-item; . By default this includes

  • elements. Because this property is inherited, it can be set on a parent element (normally

        ) to make the same list styling apply to all the items inside.

        This property is a shorthand for the following CSS properties:

        list-style: square; list-style: url(‘../img/shape.png’); list-style: inside; list-style: georgian inside; list-style: lower-roman url(‘../img/shape.png’) outside; list-style: none; list-style: inherit; list-style: initial; list-style: revert; list-style: unset;

        The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.


        Safari has an issue whereby unordered lists with a list-style value of none applied to them will not be recognized as a list in the accessibility tree. To address this, add a zero-width space as pseudo-content before each list item to ensure the list is recognized properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

        ul { list-style: none; } ul li::before { content: “200B”; }

        Setting list style type and position


        List 1

        • List Item1
        • List Item2
        • List Item3

        List 2

        • List Item A
        • List Item B
        • List Item C


        .one { list-style: circle; } .two { list-style: square inside; }


        BCD tables only load in the browser


  • Leave a comment

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