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:

[Christian J]

Not really! How can I darken the <nav> border part above the "current" page?

You can't literally apply two colors on a single top border like that (that's why I let the ticker border be part of the link instead). The border-style values may produce some shading, but then it's usually two equally thick lines, and browsers may render it differently.

Please see the dark gray area:

Isn't that what I did (except that I used other colors):

[RainLover]

Isn't that what I did (except that I used other colors):

Duh, sorry! I forgot to change a.current to a#current.
Thanks for the continuous support and help! 🌹