Summarize this article with:
Default bullet points look boring. Every website has them, and they all look the same.
The CSS list-style property changes that. It controls markers on ordered and unordered lists, from simple disc and square bullets to roman numerals, custom images, and emoji.
These CSS list style examples cover everything you need: the shorthand syntax, all three sub-properties, custom bullets with ::before pseudo-elements, and the @counter-style rule for advanced numbering.
You’ll also learn accessibility fixes for screen readers and common mistakes that break list styling.
What is CSS list-style
CSS list-style is a shorthand property that controls the appearance of list item markers in ordered and unordered lists.
It combines three separate properties into one declaration: list-style-type, list-style-position, and list-style-image.
The property applies to <ul>, <ol>, and <li> elements, plus any element with display: list-item.
Because list-style is inherited, you set it on the parent container and all nested list items follow automatically.
Default browser styles vary slightly, but most render unordered lists with disc bullets and ordered lists with decimal numbers.
CSS List Style Examples To Check Out
List Style Domain Favicon
See the Pen
List Style Domain Favicons by John McGarrah (@freshmasterj)
on CodePen.
Beautiful Custom List Styles Using Modern CSS
List Styles with HTML and CSS by Tiffany May
See the Pen
List Styles HTML/CSS by Tiffany May (@tiffyzsmile)
on CodePen.
Custom CSS List Styles by Kyle Timothy Charlton
See the Pen
Custom CSS List Styles by Kyle Timothy Charlton (@kyle-timothy-charlton)
on CodePen.
Custom CSS List Items by Gabriel Molochko
See the Pen
Custom CSS List Items by Gabriel Molochko (@gabrielmolochko)
on CodePen.
Custom Counter for Ordered List by Eric E. Anderson
See the Pen
Custom Counter for Ordered List by Eric E. Anderson (@esquareda)
on CodePen.
Alternating List from web.dev
See the Pen
Alternating list by web.dev (@web-dot-dev)
on CodePen.
Horizontal Menu using List Style
See the Pen
Untitled by Josh Johnson (@secondfret)
on CodePen.
Break In The Middle Ordered List by Chris Coyier
See the Pen
Break in the middle ordered list by Chris Coyier (@chriscoyier)
on CodePen.
Ordered List with CSS Counters by Ian Mac
See the Pen
Ordered List with CSS Counters by Ian Mac (@iam)
on CodePen.
Standard Thumbnail Grid
See the Pen
Untitled by Josh Johnson (@secondfret)
on CodePen.
Nested Decimal Ordered List by Chris Coyier
See the Pen
Nested Decimal Ordered List by Chris Coyier (@chriscoyier)
on CodePen.
CSS List-Style Guide
List Inline Style
See the Pen
List Styles by Cody McAfee (@gcmcafee)
on CodePen.
Thumbnail List Vibes
See the Pen
Untitled by Josh Johnson (@secondfret)
on CodePen.
Reversed & Split Magic with ::before
See the Pen
Reversed and split list with ::before by web.dev (@web-dot-dev)
on CodePen.
Picture Bullets with List Style
See the Pen
Image Bullets by Chris Coyier (@chriscoyier)
on CodePen.
Big Numbers in the House!
See the Pen
Untitled by Josh Johnson (@secondfret)
on CodePen.
Emoji Bullets? Why Not!
See the Pen
Emoji Bullets List by Chris Coyier (@chriscoyier)
on CodePen.
Flexbox Menu List for the Foodies
See the Pen
Flexbox Menu List by AyaOki (@mazereeta)
on CodePen.
Decoding list-style with codesdope
See the Pen
list-style-type by Aakhya Singh (@aakhya)
on CodePen.
HelvetiList: Beauty in Simplicity
See the Pen
Untitled by Josh Johnson (@secondfret)
on CodePen.
Skew-tastic List Styles
See the Pen
Transfrom Skew Property and nice List styles by vikas singh (@vikassingh1111)
on CodePen.
CSS List-Style: The Three Musketeers
Shiny Colored Circles
See the Pen
Circle Ordered List Numbers by Chris Coyier (@chriscoyier)
on CodePen.
Image It Up with list-style-image
List Glam by Aakhya Singh
See the Pen
CSS list-style-position example by Aakhya Singh (@aakhya)
on CodePen.
List UI: When HTML Meets CSS
See the Pen
List UI by Collin Smith (@collincodes)
on CodePen.
Random, but Hand-Picked
See the Pen
“Random” Order List by Chris Coyier (@chriscoyier)
on CodePen.
Three Lines of Total Customization
See the Pen
Totally Custom List Styles by Stephanie Eckles (@5t3ph)
on CodePen.
Cycling Through List Symbols
See the Pen
Custom List Symbols by Chris Coyier (@chriscoyier)
on CodePen.
How Does the CSS list-style Property Work
The list-style shorthand accepts one, two, or three values in any order.
Browsers parse the values and assign them to the correct sub-property based on their type.
Missing values default to their initial states: disc for type, outside for position, none for image.
Here’s the basic syntax:
ul { list-style: square inside url("marker.png"); }When both list-style-type and list-style-image are set, the type acts as a fallback if the image fails to load.
This fallback behavior is built into the CSS specification and works across Chrome, Firefox, Safari, and Edge.
What are the Three list-style Sub-Properties
Each sub-property handles a specific aspect of list marker styling:
- list-style-type — defines the marker symbol (disc, circle, square, decimal, lower-alpha, upper-roman, none)
- list-style-position — controls whether markers sit inside or outside the content box
- list-style-image — replaces the default marker with a custom image via URL
You can use these properties individually or combine them in the shorthand.
Individual properties offer more control when you need to override just one aspect without affecting others.
What Values Does list-style-type Accept
The list-style-type property accepts over 40 predefined marker styles.
These range from simple shapes like disc and square to complex numbering systems like Georgian and traditional Chinese.
The none value removes markers entirely, useful for navigation menus and custom-styled lists.
You can also use any single character as a marker with string values: list-style-type: "→";
The @counter-style rule lets you define completely custom numbering systems with symbols, prefixes, and suffixes.
How to Style Unordered Lists with list-style-type
Unordered lists default to disc bullets but accept circle, square, or none.
/* Hollow circle bullets */
ul.hollow { list-style-type: circle; }
/* Filled square bullets */
ul.square { list-style-type: square; }
/* No visible markers */
ul.clean { list-style-type: none; }The disc value produces a filled circle, circle creates a hollow ring, and square renders a filled box.
These three options cover most user interface needs without custom images.
How to Style Ordered Lists with list-style-type
Ordered lists support multiple numbering formats for different contexts.
/* Standard numbers: 1, 2, 3 */
ol.numbers { list-style-type: decimal; }
/* Lowercase letters: a, b, c */
ol.alpha { list-style-type: lower-alpha; }
/* Roman numerals: I, II, III */
ol.roman { list-style-type: upper-roman; }
/* Leading zeros: 01, 02, 03 */
ol.padded { list-style-type: decimal-leading-zero; }Other options include lower-roman, upper-alpha, and georgian for specialized applications.
Legal documents often use nested combinations: upper-roman for sections, upper-alpha for subsections, decimal for items.
What Does list-style-position Control
The list-style-position property determines where markers appear relative to the list item’s content box.
Two values exist: outside (default) and inside.
This choice affects text alignment, especially with multi-line list items.
When to Use Inside Positioning
Inside positioning places markers within the content box, pushing text to the right.
ul {
list-style-position: inside;
border: 1px solid #ccc;
}Wrapped lines align with the marker rather than hanging indent style.
When to Use Outside Positioning
Outside positioning (default) keeps markers in the margin area.
ul { list-style-position: outside; }Text wraps with a hanging indent, aligning subsequent lines with the first line’s text rather than the bullet.
This creates the traditional list appearance found in most documents and websites.
How to Use list-style-image for Custom Markers
The list-style-image property replaces default markers with custom graphics.
ul { list-style-image: url("checkmark.png"); }The image scales to roughly 1em, matching the current font size.
Positioning control is limited compared to pseudo-element approaches.
What Image Formats Work with list-style-image
PNG, GIF, JPG, and SVG formats all work as list markers.
SVG offers the best quality because it scales without pixelation across different screen densities.
Keep images small, around 16×16 pixels for standard text, to maintain proper alignment.
How to Set a Fallback for list-style-image
Always specify list-style-type alongside list-style-image as a backup.
ul { list-style: square url("custom-bullet.svg"); }If the image path breaks or fails to load, browsers display the square marker instead.
This fallback pattern protects your user experience from broken layouts.
How to Remove List Markers Completely
Setting list-style: none; removes all visible markers from list items.
ul {
list-style: none;
padding: 0;
margin: 0;
}Remember to reset padding and margin since browsers apply default spacing that accounts for marker width.
This technique is standard for CSS menu systems, card layouts, and custom-styled content blocks.
What Happens to Accessibility When Markers Are Hidden
Safari’s VoiceOver doesn’t announce lists with list-style: none as actual lists.
Fix this by adding role="list" to the <ul> or <ol> element.
<ul role="list" class="nav-menu">
<li>Home</li>
<li>About</li>
</ul>Screen readers like NVDA handle this correctly, but the ARIA role ensures consistent behavior across all assistive technologies.
How to Write the list-style Shorthand Correctly
The list-style shorthand accepts values in any order.
Browsers identify each value by its type: keywords for type and position, URL for image.
/* All three values */
ul { list-style: square outside url("bullet.svg"); }
/* Two values */
ol { list-style: upper-roman inside; }
/* Single value */
ul { list-style: circle; }Omitted values reset to defaults: disc, outside, none.
Watch out when overriding, the shorthand resets all three sub-properties even if you only specify one.
How to Create Custom Bullets with CSS ::before
The ::before pseudo-element offers more control than list-style-image.
ul {
list-style: none;
padding-left: 1.5em;
}
li::before {
content: "✓";
color: #22c55e;
font-weight: bold;
margin-right: 0.5em;
margin-left: -1.5em;
}You control color, size, spacing, and can even add CSS animation effects.
What Are the Advantages of Using ::before Over list-style-image
Pseudo-elements accept any CSS property: colors, transforms, transitions, filters.
Use emoji, unicode symbols, Font Awesome icons, or inline SVG as content values.
li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
margin-right: 12px;
}Perfect for CSS gradient bullets or animated markers that list-style-image can’t achieve.
What is @counter-style and How Does it Work with Lists
The @counter-style rule defines custom numbering systems beyond built-in options.
@counter-style emoji-numbers {
system: cyclic;
symbols: "🔥" "⭐" "💡" "🎯" "🚀";
suffix: " ";
}
ol { list-style-type: emoji-numbers; }Properties include system (cyclic, numeric, alphabetic), symbols, prefix, suffix, and range.
Browser support covers Chrome 91+, Firefox 33+, and Safari 17+. Edge follows Chromium.
Check Can I Use for current compatibility data before production use.
Which Browsers Support CSS list-style Properties
Core list-style properties have universal support across all modern browsers.
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| list-style | 1+ | 1+ | 1+ | 12+ |
| list-style-type | 1+ | 1+ | 1+ | 12+ |
| list-style-position | 1+ | 1+ | 1+ | 12+ |
| list-style-image | 1+ | 1+ | 1+ | 12+ |
| ::marker pseudo | 86+ | 68+ | 11.1+ | 86+ |
| @counter-style | 91+ | 33+ | 17+ | 91+ |
The ::marker pseudo-element provides direct marker styling but has newer browser requirements.
For cross-browser compatibility, stick with list-style properties or ::before pseudo-elements.
Common CSS list-style Mistakes to Avoid
These errors trip up developers regularly when styling lists.
Forgetting to reset padding: Removing markers without adjusting padding leaves awkward empty space on the left.
/* Wrong */
ul { list-style: none; }
/* Right */
ul {
list-style: none;
padding-left: 0;
}Using shorthand when you shouldn’t: The shorthand resets all sub-properties, potentially overwriting inherited styles you wanted to keep.
Ignoring inheritance: Child lists inherit parent list styles; nested <ol> inside <ul> might show unexpected markers.
Missing fallbacks: Custom images without type fallbacks break when images fail to load.
Accessibility oversights: Removing markers without ARIA roles breaks screen reader announcements in Safari.
Test list styles in Chrome DevTools, Firefox Developer Tools, and Safari WebKit Inspector to catch rendering differences early.
MDN Web Docs and the W3C CSS specification remain the authoritative references for edge cases and browser quirks.
FAQ on CSS List Style Examples
How do I change bullet style in CSS?
Use the list-style-type property on your ul or ol element. Values include disc, circle, square for unordered lists and decimal, lower-alpha, upper-roman for ordered lists.
Apply it directly:
ul { list-style-type: square; }How do I remove bullet points from a list?
Set list-style: none; on the ul element. Also reset padding-left to 0 to eliminate the empty space where markers appeared.
Add role="list" for web accessibility in Safari VoiceOver.
What is the difference between list-style and list-style-type?
list-style-type controls only the marker symbol. The list-style shorthand combines type, position, and image in one declaration.
Shorthand resets all three sub-properties, even values you don’t specify.
How do I use custom images as list bullets?
Apply list-style-image with a URL:
ul { list-style-image: url("bullet.png"); }Always include a list-style-type fallback. The ::before pseudo-element offers better control over sizing and color.
Why is my list-style not working?
Common causes: display property changed from list-item, specificity conflicts with other CSS rules, or shorthand resetting your values.
Check Chrome DevTools computed styles to identify which rule wins.
How do I style nested lists differently?
Target nested lists with descendant selectors:
ul ul { list-style-type: circle; }CSS inheritance means child lists copy parent styles unless you override them with more specific rules.
Can I change list marker color without changing text color?
Use the ::marker pseudo-element:
li::marker { color: red; }Browser support starts at Chrome 86+, Firefox 68+, Safari 11.1+. The ::before method works everywhere.
What is list-style-position inside vs outside?
Outside (default) places markers in the margin. Inside positions them within the content box, pushing text right.
Multi-line items wrap differently. Outside creates hanging indents, inside aligns all lines with the marker.
How do I create numbered lists with letters or roman numerals?
Set list-style-type to lower-alpha, upper-alpha, lower-roman, or upper-roman on your ol element.
The @counter-style rule creates custom numbering systems with symbols, prefixes, and suffixes.
Do list styles affect SEO or accessibility?
Visual styling doesn’t impact SEO. Semantic HTML structure matters more.
For accessibility, lists with list-style: none need role=”list” so screen readers announce them correctly in Safari.
Conclusion
These CSS list style examples give you complete control over bullet points and numbered lists. From basic disc and circle markers to complex @counter-style rules, the options fit any design requirement.
The list-style shorthand handles most cases. Three values, any order, done.
When you need more control, the ::before pseudo-element and ::marker selector open up color, sizing, and animation possibilities that list-style-image can’t match.
Keep accessibility in mind. Screen readers like NVDA and VoiceOver rely on proper list semantics, so add role="list" when removing markers.
Test across Chrome, Firefox, Safari, and Edge. Use the CSS properties with solid browser support for production, save newer features like @counter-style for progressive enhancement.
