How to change part of the border color

Here’s a sample navigation menu:

nav {
  border-top: 5px solid;

nav a {
  font-size: 12px;
  padding: 1em;
  <a href="#">Page 1</a>
  <a href="#" id="current">Page 2</a>
  <a href="#">Page 3</a>
  <a href="#">Page 4</a>

Demo on JSFiddle: Mori/38fL5y7c

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


You could try using negative margins for the links, so you can draw the links’ top borders on top of the nav’s border.

nav a {
  padding: 1em;
  display: inline-block; /* box model properties are more predictable for block elements */
  margin-top: -5px;
  border-top: 5px solid transparent;

nav a:hover {
  border-top-color: red; /* or whatever color */
1 Like