← All languages
CSS construct of the day
Random

list-style

A shorthand for setting list-style-type, list-style-position, and list-style-image.

Description

The list-style shorthand property sets the marker type, position, and image for list items in a single declaration. It applies to elements with display: list-item, which includes li elements by default.

The values can be specified in any order. If list-style-type and list-style-image are both set, the type acts as a fallback if the image fails to load. Setting list-style: none removes all list markers.

The list-style property is inherited, so setting it on a ul or ol element applies it to all list items within. For custom markers, consider using the ::marker pseudo-element, which provides more styling options.

Arguments

NameDescriptionOptional
type The marker type (disc, circle, square, decimal, lower-alpha, upper-roman, none). Yes
position Whether the marker is inside or outside the list item's content flow (inside, outside). Yes
image An image to use as the marker (e.g., url('marker.png')). Yes

Example

ul {
  list-style: disc outside;
}
.clean-list {
  list-style: none;
  padding: 0;
}

Reference