Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set a Border Around Navbar with CSS
To set a border around navbar with CSS, is an easy task and can be easily achieved using CSS properties. In this article, we will learn and understand three different approaches for setting a border around navbar with CSS.
We are having a navigation bar with four links in our HTML document, our task is to set a border around navbar with CSS.
Approaches to Set a Border Around Navbar
Here is a list of approaches to set a border around navbar with CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Setting Border Using border Property
- Setting Border Using outline Property
- Setting Border Using box-shadow Property
Setting Border Using border Property
To set a border around navbar with CSS, we will be using CSS border property which is a short hand property for border-width, border-style, and border-color and sets border around any element.
- To create the navbar we have used a div container with class navbar to group all the link created using anchor tag.
- To design the navbar, we have used navbar class which sets the width, padding and text-alignment of the navigation bar.
- Then, we have applied styles for all the links using a element selector where we have set its font-family, font-size, applied padding, removed underlining of links using text-decoration, set text color and margin.
- We have used :hover psuedo class to change background-color and text color upon hovering on links.
- At the end, We have used "border: 2px solid #031926;" using border class which sets a solid border of 2px around navbar.
Example
Here is a complete example code implementing above mentioned steps to set a border around navbar using CSS border property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Setting a border around navbar with CSS
</title>
<style>
.navbar {
width: 100%;
padding: 10px;
text-align: center;
}
a {
font-family: Verdana, sans-serif;
margin: 0 15px;
color: #031926;
text-decoration: none;
font-size: 15px;
padding: 10px;
}
a:hover {
background-color: #031926;
color: white;
}
.border {
border: 2px solid #031926;
}
</style>
</head>
<body>
<div class="navbar border">
<a href="/index.htm"
target="_blank">Home</a>
<a href="/market/login.jsp"
target="_blank"> Login</a>
<a href="/market/index.asp"
target="_blank"> Courses</a>
<a href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
</div>
<h3>
Setting a Border Around Navbar with CSS
</h3>
<p>
In this example we have used <strong>border
</strong> property to set a border around
navbar with CSS.
</p>
</body>
</html>
Setting Border Using outline Property
In this article, to set a border around navbar with CSS, we will be using CSS outline property which is drawn around any element outside of the border.
- To create and design the navbar, we have used similar method as first approach.
- Then, we have used "outline: 2px solid #031926;" using outline class which sets a solid border of 2px around navbar.
Example
Here is a complete example code implementing above mentioned steps to set a border around navbar using CSS outline property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Setting a border around navbar with CSS
</title>
<style>
.navbar {
width: 100%;
padding: 10px;
text-align: center;
}
a {
font-family: Verdana, sans-serif;
margin: 0 15px;
color: #031926;
text-decoration: none;
font-size: 15px;
padding: 10px;
}
a:hover {
background-color: #031926;
color: white;
}
.outline {
outline: 2px solid #031926;
}
</style>
</head>
<body>
<div class="navbar outline">
<a href="/index.htm"
target="_blank">Home</a>
<a href="/market/login.jsp"
target="_blank"> Login</a>
<a href="/market/index.asp"
target="_blank"> Courses</a>
<a href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
</div>
<h3>
Setting a Border Around Navbar with CSS
</h3>
<p>
In this example we have used <strong>outline
</strong> property to set a border around
navbar with CSS.
</p>
</body>
</html>
Setting Border Using box-shadow Property
In this article, we will be using CSS box-shadow property to set a border around navbar with CSS which adds a shadow effect around any element. Here, we will be adding a border around navbar using box-shadow property.
- To create and design the navbar, we have used similar method as first approach.
- Then, we have used "box-shadow: 0 0 0 2px #031926;" using outline class where first three 0 represent horizontal offset, vertical offset and blur radius and 2px sets the border around navbar which represent the spread radius.
Example
Here is a complete example code implementing above mentioned steps to set a border around navbar using CSS box-shadow property.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Setting a border around navbar with CSS
</title>
<style>
.navbar {
width: 100%;
padding: 10px;
text-align: center;
}
a {
font-family: Verdana, sans-serif;
margin: 0 15px;
color: #031926;
text-decoration: none;
font-size: 15px;
padding: 10px;
}
a:hover {
background-color: #031926;
color: white;
}
.shadow {
box-shadow: 0 0 0 2px #031926;
}
</style>
</head>
<body>
<div class="navbar shadow">
<a href="/index.htm"
target="_blank">Home</a>
<a href="/market/login.jsp"
target="_blank"> Login</a>
<a href="/market/index.asp"
target="_blank"> Courses</a>
<a href="/about/contact_us.htm"
target="_blank"> Contact Us</a>
</div>
<h3>
Setting a Border Around Navbar with CSS
</h3>
<p>
In this example we have used <strong>box-
shadow</strong> property to set a border around
navbar with CSS.
</p>
</body>
</html>
Conclusion
In this article, we have understood how to set a border around navbar with CSS. We discussed three different approaches which are: by using CSS border() property, by outline property and by using box-shadow property. User can use any approach to set the border around navbar using CSS.
9K+ Views
