Bootstrap Nav Bar Links Border

Question

I am trying to put a border around one of my links in my bootstrap nav bar so that it looks like this image here.

I am trying to simply put a border around the <li> element, but the boundaries of Bootstrap navbar <li> elements go up to the very top and bottom of the navbar, unlike in the picture. Here is what my efforts look like:

The CSS I am trying to use is just a simple border:

#nav-signup {
    border: 1px solid #ACOLOR;
}

I tried setting margins around the link, but this pushes the link out of line with the others. I also tried wrapping the SIGN UP button in a div, but that makes it lose a lot of the bootstrap properties.

Is there any easy way for me to put this border around the SIGN UP link without having to fight bootstrap?

Thanks

Answer 1

Wrap the text in span and add border to it thanks.