x
<html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="4/w3.css"><body><div class="w3-container"><h2>Bordered Navigation Bars</h2><p>Use the w3-border class to add borders around the navigation bar:</p><div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>Use the w3-round classes to add rounded borders:</p><div class="w3-bar w3-border w3-round w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>Use the w3-card classes to display the navigation bar as a card:</p><div class="w3-bar w3-border w3-card-4 w3-light-grey"> <a href="#" class="w3-bar-item w3-button">Home</a> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a></div><p>You can also add a border to each link:</p><div class="w3-bar w3-border w3-light-grey"> <a href="#" class="w3-bar-item w3-button w3-border-right">Home</a> <a href="#" class="w3-bar-item w3-button w3-border-right">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-border-right">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-border-right">Link 3</a></div></div></body>