How to change part of the border color

How to change part of the border color
0
#1

Here’s a sample navigation menu:

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
}
<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 on JSFiddle: Mori/38fL5y7c

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

menu

#2

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