Top Border Pattern CSS3

Multiple Border Pattern done with pure CSS.

by japaneselanguagefriend

HTML

<div class=container>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div>
    <h4>Howdy, this is multiple colors of border-top. Actually it's not border, it's just multiple list item. </h4>
  </div>

CSS

* {
  margin:0;
  padding:0;
  font-family:segoe UI;
}

.container {
  width:400px;
  margin: 150px auto 0 auto;
  border-left:1px solid #95a5a6;
  border-right:1px solid #95a5a6;
  border-bottom:1px solid #95a5a6;
}

ul {
  list-style:none;
  width:100%;
  font-size:0;
}

li {
  display:inline-block;
  width:20%;
  height:7px;
}

li:nth-child(1) {
  background:#2ecc71;
}

li:nth-child(2) {
  background:#3498db;
}

li:nth-child(3) {
  background:#f1c40f;
}

li:nth-child(4) {
  background:#e74c3c;
}

li:nth-child(5) {
  background:#9b59b6;
}

div {
  margin: 20px;
}

h4 {
  color:#95a5a6;
  text-align:center;
}