How to change part of the border color

Here's a sample navigation menu:

Code:

---

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
}

---

Code:

---

<nav>
  <a href="#">Page 1</a>
  <a href="#" id="current">Page 2</a>
  <a href="#">Page 3</a>
  <a href="#">Page 4</a>
</nav>

---

DEMO

How can I change the part of the border color above the current page so it looks like this:

Attachment 6344

This should be how you want it.
https://jsfiddle.net/a6cjsqbL/

(I have it on hover but i can change it to current page - lack of info to know what you want)