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. ... Read More

Use the background-attachment property to display the background image as fixed.ExampleYou can try to run the following code to implement the background-attachment property −Live Demo                    body {             background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");             background-repeat: no-repeat;             background-attachment: fixed;             background-position: right top;          }                     Background Image    

Use the border-top property in CSS to set all the top border properties in a single declaration.ExampleYou can try to run the following code to implement the border-top property −Live Demo                    p {             border-style: solid;             border-top: thick dashed #FFFF00;          }                     This is demo text    

To set a style to current link in a navigation bar, add style to .active. You can try to run the following code to style current link:ExampleLive Demo                    ul {             list-style-type: none;             margin: 5;             padding: 5;          }          li a {             display: block;             width: 70px;             background-color: #F0E7E7;          }          .active {             background-color: #4CAF50;             color: white;          }                              Home          Company          Product          Services          Contact          

To create a transparent box with CSS, you can try to run the following codeExampleLive Demo                    div {             background-color: #808000;             padding: 20px;          }          div.myopacity {             opacity: 0.4;             filter: alpha(opacity=80);          }                     Heading       Check trensparency in the below box:                opacity 0.4                      opacity 1          

To set the opacity for the background color, use the opacity property with RGBA color values.ExampleYou can try to run the following code to implement the opacity property:Live Demo                    div {             background: rgb(40, 135, 70);             padding: 20px;          }          div.first {             background: rgba(40, 135, 70, 0.2);          }          div.second {             background: rgba(40, 135, 70, 0.6);          }                     RGBA color values       20% opacity       60% opacity       Default Opacity    

To style all visited links, use the CSS :visited selector.ExampleYou can try to run the following code to implement the :visited selectorLive Demo                    a:link, a:visited {             background-color: white;             color: black;             border: 1px solid blue;             padding: 30px 30px;             text-align: center;             text-decoration: none;             display: inline-block;          }          a:hover, a:active {             background-color: red;             color: white;          }                     Demo Link    

Use the opacity property to add transparency to the background of an element. You can try to run the following code to work.ExampleLive Demo                    div {             background-color: #808000;             padding: 20px;          }          div.one {             opacity: 0.2;             filter: alpha(opacity=20);          }          div.two {             opacity: 0.5;             filter: alpha(opacity=50);          }                     Heading       Check transparency in the below section:                opacity 0.2                      opacity 0.5                      opacity 1          

Use the CSS : visited selector to style all visited links.ExampleYou can try to run the following code to implement the :visited selector:Live demo                    a:link, a:visited {             background-color: white;             color: black;             border: 1px solid blue;             padding: 30px 30px;             text-align: center;             text-decoration: none;             display: inline-block;          }          a:hover, a:active {             background-color: red;             color: white;          }                     Demo Link    

Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid SelectorLive Demo                    input:valid {             background: red;             color: white;          }                     Heading             The style (red color background) appears if you type a relevant/ valid email address.