Run
Back to
CSS list-style-type Property
<!DOCTYPE html><html><head><style type="text/css">/* Basic layout and typography */ .lists-demo { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 20px; max-width: 900px; margin: 0 auto; color: #222; } .lists-demo h1 { margin-bottom: 16px; font-size: 20px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .card { background: #fff; border: 1px solid #e6e6e6; padding: 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .card h2 { font-size: 14px; margin: 0 0 8px; } /* Base list spacing */ ul, ol { margin: 0; padding-left: 1.25rem; } /* Demonstrations of list-style-type */ .list-disc { list-style-type: disc; } .list-circle { list-style-type: circle; } .list-square { list-style-type: square; } .list-decimal { list-style-type: decimal; } .list-lower-alpha { list-style-type: lower-alpha; } .list-none { list-style-type: none; padding-left: 0; }</style></head><body><section class="lists-demo"> <h1>CSS list-style-type examples</h1> <div class="grid"> <div class="card"> <h2>Unordered - disc</h2> <ul class="list-disc"> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> </div> <div class="card"> <h2>Unordered - circle</h2> <ul class="list-circle"> <li>Red</li> <li>Green</li> <li>Blue</li> </ul> </div> <div class="card"> <h2>Unordered - square</h2> <ul class="list-square"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div class="card"> <h2>Ordered - decimal</h2> <ol class="list-decimal"> <li>First</li> <li>Second</li> <li>Third</li> </ol> </div> <div class="card"> <h2>Ordered - lower-alpha</h2> <ol class="list-lower-alpha"> <li>Option A</li> <li>Option B</li> <li>Option C</li> </ol> </div> <div class="card"> <h2>No markers</h2> <ul class="list-none"> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul> </div> </div> </section></body></html>
