css borders

by Ahmed Salama

HTML

<div class="parent">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>

CSS

.parent{
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-right:1px solid red;
  border-left:1px solid red;
  border-bottom:1px solid #ddd;
  border-top: none;
}

.parent a:first-of-type{
  border-top:1px solid red;
}

.parent a:last-of-type{
  border-bottom:1px solid red;
}

.parent a:hover{
  border-color:#ddd;
}