Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 three different approaches for setting a border around navbar with CSS.
Syntax
/* Using border property */
.navbar {
border: width style color;
}
/* Using outline property */
.navbar {
outline: width style color;
}
/* Using box-shadow property */
.navbar {
box-shadow: 0 0 0 width color;
}
Method 1: Using border Property
The CSS border property is the most common way to add a border around elements. It's a shorthand for border-width, border-style, and border-color.
Example
Here's how to create a navbar with a solid border −
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
width: 100%;
padding: 15px;
text-align: center;
border: 2px solid #031926;
background-color: #f8f9fa;
}
.navbar a {
font-family: Arial, sans-serif;
margin: 0 20px;
color: #031926;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
border-radius: 4px;
transition: all 0.3s ease;
}
.navbar a:hover {
background-color: #031926;
color: white;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="/index.htm">Home</a>
<a href="/about.htm">About</a>
<a href="/services.htm">Services</a>
<a href="/contact.htm">Contact</a>
</nav>
</body>
</html>
A horizontal navigation bar with a solid dark border appears with four clickable links that change color on hover.
Method 2: Using outline Property
The CSS outline property creates a border-like effect outside the element's border. Unlike borders, outlines don't take up space in the layout.
Example
Here's how to add an outline border to the navbar −
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
width: 100%;
padding: 15px;
text-align: center;
outline: 3px solid #e74c3c;
background-color: #f8f9fa;
}
.navbar a {
font-family: Arial, sans-serif;
margin: 0 20px;
color: #2c3e50;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
}
.navbar a:hover {
background-color: #e74c3c;
color: white;
border-radius: 4px;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="/index.htm">Home</a>
<a href="/about.htm">About</a>
<a href="/services.htm">Services</a>
<a href="/contact.htm">Contact</a>
</nav>
</body>
</html>
A navigation bar with a red outline border appears, where the outline doesn't affect the element's layout spacing.
Method 3: Using box-shadow Property
The CSS box-shadow property can create border-like effects using the spread radius parameter. This method offers more styling flexibility.
Example
Here's how to create a border effect using box-shadow −
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
width: 100%;
padding: 15px;
text-align: center;
box-shadow: 0 0 0 2px #27ae60;
background-color: #f8f9fa;
}
.navbar a {
font-family: Arial, sans-serif;
margin: 0 20px;
color: #27ae60;
text-decoration: none;
font-size: 16px;
padding: 10px 15px;
transition: all 0.3s ease;
}
.navbar a:hover {
background-color: #27ae60;
color: white;
border-radius: 4px;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="/index.htm">Home</a>
<a href="/about.htm">About</a>
<a href="/services.htm">Services</a>
<a href="/contact.htm">Contact</a>
</nav>
</body>
</html>
A navigation bar with a green shadow-based border appears, creating a border effect using the box-shadow property.
Comparison
| Method | Advantages | Best Used For |
|---|---|---|
border |
Standard, affects layout, supports different styles | Regular borders that need to be part of layout |
outline |
Doesn't affect layout, draws outside border | Highlighting elements without layout changes |
box-shadow |
Multiple shadows, blur effects, flexible positioning | Creative border effects and multiple borders |
Conclusion
All three methods effectively create borders around navbars. Use border for standard borders, outline for non-layout-affecting borders, and box-shadow for creative border effects with additional styling options.
9K+ Views
