How to change part of the border color

Forum Moderators: not2easy

Message Too Old, No Replies

How to change part of the border color

Rain_Lover

7:15 am on Apr 23, 2019 (gmt 0)

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 [jsfiddle.net]

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

IMAGE [i.stack.imgur.com]

NickMNS

12:19 pm on Apr 23, 2019 (gmt 0)

The border needs to be applied to each nav a not to nav alone. Then create a new class called active (or call it whatever) and then style the border color there.
[jsfiddle.net...]

Not that you will need to add a negative margin to nav a to compensate for the borders that are not shown. Your border width is 5px, so you need

margin: 0 -5px;