Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Bordered Lists

Sometimes we want a list that doesn’t look like a simple, and typical, list with bullets or numbers. You’ll find a few "different" list styles below to stimulate your imagination, or simply copy and paste code and tweak as you see fit to use on your own sites.

The HTML is simple for these lists. It's the same basic code any simple list uses. It’s the CSS that makes the difference, and perhaps makes the lists more likely to be read. Here’s the basic HTML for every one of these list demonstrations:

<ul class="class-name">
<li>List Item One</li>
<li>List Item Two</li>
<li>...and so on</li>
</ul>

Ready? Here we go...

The Simpleton

• Watermelon
• Honeydew
• Cantaloupe
• Jade Dew

ul.simpleton {
 list-style-type: none; 
 padding: 0; 
 border: 1px solid #2F7E9D;
} 
ul.simpleton li {
 padding: 7px 17px; 
 border-bottom: 1px dashed #2F7E9D;
} 
ul.simpleton li:last-child {
border-bottom: none;
}

The Classy One

• A Drive in the Country by Dusty Rhodes
• The King of Beer by I.P. Moore
• Tornado Strike! by Anita Newhouse
• A Climb Too High by Willie Fall

ul.classy {
padding: 0;
margin: 15px 0 28px 0;
border-top: 1px solid #A7A7A7;
width: 277px;
}
ul.classy li {
list-style: none;
margin: 0;
padding: 3px;
border-bottom: 1px solid #A7A7A7;
text-decoration: none;
}

The Edge

• Fumdumble
• Hoobiedook
• Chumdiddley
• Goobernoodle

ul.edge {
border-left: 5px solid red;
background-color: #f1f1f1;
list-style-type: none;
padding: 0 12px;
}

The Double Edge

• Football
• Baseball
• Basketball
• Peanuts

ul.double-edge {
border-left: 6px solid black; 
list-style-type: none; 
padding: 0;
} 
ul.double-edge li {
border-left: 6px solid red; 
padding-left: 12px;
}

The Film Strip

• Daffy Duck
• Foghorn Leghorn
• Bugs Bunny
• Popeye the Sailor

ul.film {
border-left: 7px dotted black; 
list-style-type: none; 
padding: 0;
} 
ul.film li {
border-left: 7px solid black; 
padding-left: 9px;
}

Erosion

• Tornado
• Hurricane
• Thunder
• Pudding

ul.erosion {
border-left: 7px dotted black; 
list-style-type: square; 
padding: 0;
} 
ul.erosion li {
border-left: 7px solid black; 
padding-left: 7px;
}

The Racer

• Richard Petty
• Dale Earnhardt
• Rusty Wallace
• Speedy Gonzales

ul.racer {
border-left: 4px double #A40000; 
list-style-type: none;
padding: 0;
} 
ul.racer li {
border-left: 4px double #A40000; 
padding-left: 12px;
}

I hope you’ve enjoyed this little demonstration of lists with various border styles. With all the border styles and colors available, this showing barely touches the surface. Play around and see what you can come up with—it’s fun!

Oh what the heck, here's one last list for the show...

Things to Buy Boogie Jack

• New Guitar
• New Pickup
• New House
• Lunch