How to change part of the border color Options

[RainLover]

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:

[Christian J]

Oops, sorry. Like this?

CODE

nav {
display: table;
border-top: 1px solid red;
}

nav a {
display: table-cell;
padding: 1em;
color: #000;
background: #fff;
border-top: 5px solid pink;
}

nav a.current {
color: red;
background: pink;
border-top: 5px solid red;
}

[RainLover]

Oops, sorry. Like this?

CODE

nav {
display: table;
border-top: 1px solid red;
}

nav a {
display: table-cell;
padding: 1em;
color: #000;
background: #fff;
border-top: 5px solid pink;
}

nav a.current {
color: red;
background: pink;
border-top: 5px solid red;
}

Not really! How can I darken the <nav> border part above the "current" page? Please see the dark gray area: