How to add borders around navigation labels? - css

Question

Consider this HTML:
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
I would like to know how I can add borders around each button in a light blue or blue color.

Answer 1

It's pretty easy, just add the following rule:
a {
border: 1px blue solid;
}
And here is the snippet:
a {
border: 1px blue solid;
}
<ul>
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
</ul>

Answer 2

Reference this guide here https://www.w3schools.com/css/css_border.asp
add a class to all of the buttons and add border attributes to it.
In your html file
<a href="index.php" class="border">
In your style file (or styles in header)
.border{border: 2px solid #0000FF;}
You could also do this inline but head over to w3schools to learn about that

Answer 3

You can just add a border to the a element and with padding make it farther away from the words. Displaying the li elements as inline block will make them stay on the same line. Since I added the border on the a element, that means that the whole area inside the border is clickable.
a{
border:2px solid lightblue;
padding:10px 20px;
text-decoration:none;
}
li{
display:inline-block;
}
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>

Answer 4

Rob,
You should be able to add the following code in your CSS.
ul li {
border-bottom:1px solid blue;
}
li {
display:inline-block;
}
<ul>
<li>Border</li>
<li>Bottom</li>
<li>Blue</li>
</ul>
You can change the border attributes. ie
ul li {
border-bottom: 5px solid green;
}
li {
display:inline-block;
}
<ul>
<li>Border</li>
<li>Bottom</li>
<li>Green</li>
</ul>
etc.
You can make other styling changes but your question the "border-bottom" attribute might be what you're looking for.
Hope this helps.

Answer 5

I've made a fiddle that might help: https://jsfiddle.net/9mmf3omc/1/
html
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
css
li {
display: inline-block; # necessary to format links/buttons correctly
margin: 10px 0;
}
li a {
border: 1px solid blue; # adds blue border around link/button
padding: 10px; # gives some room between text and border
text-decoration: none; # removes underlined link if you prefer
}
As for border colors, check out one of many color-picker tools like THIS and make the border any shade of blue you want. Just change:
border: 1px solid blue;
to say,
border: 1px solid #88EBFB;

Answer 6

You can do it by a few ways.
1st does the ul or ol the li belong too have a class name like
<ul class = "name">
<li role="presentation">Home </li>
<li role="presentation">About Us</li>
<li role="presentation">Contact Us</li>
<li role="presentation">Gallery</li>
</ul>