CSS Border Between List Items

This simple CSS code snippet helps you to draw a border between list items. It uses CSS border property to draw border bottom of li. It’s helpful to separate lists with a line.

How to Create CSS Border Between List Items

1. First of all, create unordered list of items in HTML as follows:

<ul>
  <li>
    The Long Way to a Small, Angry Planet
  </li>
  <li>
    Winter's Orbit
  </li>
  <li>
    Master of Formalities
  </li>
  <li>
    Screw The Galaxy: Hard Luck Hank
  </li>
</ul>

2. After that, style the list items and draw border using CSS border-bottom property as follows:

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  display: grid;
  place-content: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  font-family: sans-serif;
  font-size: 1.25rem;
  padding: 16px 0;
}

li:not(:last-of-type) {
  border-bottom: 4px solid tomato;
}

That’s all! hopefully, you have successfully created CSS border between list items. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.