CSS list-style Property

What You’ll Learn

The list-style property is a shorthand for controlling list markers. It lets you customize bullets, numbers, marker position, and optional marker images on <ul> and <ol> lists.

Introduction

The list-style property in CSS is a shorthand property for setting all the list properties in one declaration. It can be used to control the appearance of list items, including the type of bullet or numbering, the position of the marker, and an image to use as a marker.

This property is commonly used with unordered (<ul>) and ordered (<ol>) lists to enhance their presentation. You will also use it when building navigation menus, feature lists, and step-by-step instructions.

Definition and Usage

Apply list-style on ul, ol, or individual li elements. The shorthand accepts up to three values in any order: list-style-type, list-style-position, and list-style-image.

📝 Syntax

The syntax for the list-style property allows you to set three sub-properties at once:

selector {
  list-style: list-style-type list-style-position list-style-image;
}

Sub-Properties

• list-style-type — Specifies the type of list item marker (disc, square, decimal, etc.).
• list-style-position — Specifies whether the marker sits inside or outside the list item.
• list-style-image — Specifies an image URL to use as the list item marker.

Basic Example

ul {
  list-style: square inside;
}

Syntax Rules

• Any omitted value resets to its initial default.
• If a valid image is supplied, it takes priority over the marker type.
• The property is inherited by list items.
• Use none as the type to remove markers entirely.

💎 Property Values

list-style-type

list-style-position

list-style-image

🎯 Default Value

The default value for the list-style property is disc outside none. This means list items use a disc marker, the marker sits outside the list item, and no custom image is used.

Examples Gallery

Create custom unordered lists, style ordered lists, compare inside vs outside markers, and remove bullets for navigation menus.

<style>
  ul.custom-list {
    list-style: square inside;
  }
</style>

<ul class="custom-list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

ol.steps {
  list-style: lower-alpha outside;
}

.outside { list-style: disc outside; }
.inside { list-style: disc inside; }

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
  margin: 0;
}

♿ Accessibility

• Keep semantic lists — Use real ul and ol elements instead of divs with manual bullets.
• Do not remove markers without reason — If content is a true list, markers help users scan items.
• Ensure sufficient contrast — Custom marker colors should remain visible against the background.
• Screen readers still announce list length — Removing bullets visually does not remove list semantics.
• Nested lists need clear hierarchy — Use proper nesting and consistent marker styles at each level.

💡 Best Practices