Examples

Background Color

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

<div class="w3-container w3-red">
<h1>London</h1>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-container w3-green">
<h1>London</h1>
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>

Text Color

London

London is the most populous city in the United Kingdom.

<div class="w3-text-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom.</p>
</div>

Notes, Panels, and Quotes

"Make it as simple as possible, but not simpler."

Albert Einstein

<div class="w3-container w3-leftbar w3-sand">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div>

Hide (Close) a Container

X

To close this container, click on the X in the upper right corner.

<div class="w3-container w3-red">
  <span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
  <p>To close this container, click on the X in the upper right corner.</p>
</div>

Show (Open) a Container

<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show container</button> 

<div id="id01" class="w3-container w3-red" style="display:none">
  <span onclick="this.parentElement.style.display='none'" class="w3-closebtn">x</span>
  <p>London is the capital city of England.</p>
</div>

Font-Size Classes

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
<div class="w3-tiny">w3-tiny</div>
<div class="w3-small">w3-small</div>
<div class="w3-medium">w3-medium (Default)</div>
<div class="w3-large">w3-large</div>
<div class="w3-xlarge">w3-xlarge</div>
<div class="w3-xxlarge">w3-xxlarge</div>
<div class="w3-xxxlarge">w3-xxxlarge</div>
<div class="w3-jumbo">w3-jumbo</div>

Border Classes

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue leftbar.

<div class="w3-border">
  <p>I have borders on all sides.</p>
</div>

<div class="w3-border-bottom w3-border-red">
  <p>I have a red bottom border.</p>
</div>

<div class="w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>I have a blue leftbar.</p>
</div>

Displaying Notes

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

Displaying Quotes

"Make it as simple as possible, but not simpler."

Albert Einstein

<div class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div>

Padding Classes

w3-padding-4

I have 4px top and bottom padding

w3-padding-8

I have 8px top and bottom padding

w3-padding-16

I have 16px top and bottom padding

w3-padding-24

I have 24px top and bottom padding

<div class="w3-container w3-section w3-padding-4 w3-orange">
  <h4>w3-padding-4</h4>
  <p>I have 4px top and bottom padding</p>
</div>

<div class="w3-container w3-section w3-padding-8 w3-orange">
  <h4>w3-padding-8</h4>
  <p>I have 8px top and bottom padding</p>
</div>

<div class="w3-container w3-section w3-padding-16 w3-orange">
  <h4>w3-padding-16</h4>
  <p>I have 16px top and bottom padding</p>
</div>

<div class="w3-container w3-section w3-padding-24 w3-orange">
  <h4>w3-padding-24</h4>
  <p>I have 24px top and bottom padding</p>
</div>

Margin Classes

The w3-margin class adds 16px margin to all sides of an element.

The w3-margin-bottom class adds a 16px bottom margin to an element.

The w3-margin-left class adds a 16px left margin to an element.

The w3-margin-right class adds a 16px right margin to an element.

The w3-margin-top class adds a 16px top margin to an element.

<div class="w3-container w3-margin w3-green">
  <p>The w3-margin class adds 16px margin to all sides of an element.</p>
</div>

<div class="w3-container w3-margin-bottom w3-green">
  <p>The w3-margin-bottom class adds a 16px bottom margin to an element.</p>
</div>

<div class="w3-container w3-margin-left w3-green">
  <p>The w3-margin-left class adds a 16px left margin to an element.</p>
</div>

<div class="w3-container w3-margin-right w3-green">
  <p>The w3-margin-right class adds a 16px right margin to an element.</p>
</div>

<div class="w3-container w3-margin-top w3-green">
  <p>The w3-margin-top class adds a 16px top margin to an element.</p>
</div>

Round Classes

w3-round-small
w3-round
w3-round-large
w3-round-xlarge
w3-round-jumbo
<div class="w3-container">
  <h2>Round Classes</h2>
  <div class="w3-round-small w3-teal w3-padding w3-margin-bottom">w3-round-small</div>
  <div class="w3-round w3-teal w3-padding w3-margin-bottom">w3-round</div>
  <div class="w3-round-large w3-teal w3-padding w3-margin-bottom">w3-round-large</div>
  <div class="w3-round-xlarge w3-teal w3-padding w3-margin-bottom">w3-round-xlarge</div>
  <div class="w3-round-jumbo w3-teal w3-padding w3-margin-bottom">w3-round-jumbo</div>
</div>

Floating Classes

w3-left
w3-right
<div class="w3-container w3-section w3-light-grey w3-padding-0">
  <div class="w3-left w3-red w3-padding">w3-left</div>
  <div class="w3-right w3-blue w3-padding">w3-right</div>
</div>

Button Colors

<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn w3-yellow">Yellow</button>
<button class="w3-btn w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>

Hover Colors

<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button>

Button Shapes

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>

Button Sizes

<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>

Colored Cards

w3-card

<div class="w3-card-4 w3-yellow"><p>w3-card</p></div>

Displaying Alerts

Danger!

Red often indicates a dangerous or potentially negative action.

Warning!

Orange often indicates a warning that might need attention.

Warning!

Yellow often indicates a warning that might need attention.

Success!

Green often indicates something successful or positive.

Info!

Blue often indicates a neutral informative change or action.

<div class="w3-container w3-red">
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or potentially negative action.</p>
</div>

<div class="w3-container w3-orange w3-text-white">
  <h3>Warning!</h3>
  <p>Orange often indicates a warning that might need attention.</p>
</div>

<div class="w3-container w3-yellow">
  <h3>Warning!</h3>
  <p>Yellow often indicates a warning that might need attention.</p>
</div>

<div class="w3-container w3-green">
  <h3>Success!</h3>
  <p>Green often indicates something successful or positive.</p>
</div>

<div class="w3-container w3-blue">
  <h3>Info!</h3>
  <p>Blue often indicates a neutral informative change or action.</p>
</div>

Closing Alerts

×

Danger!

Red often indicates a dangerous or potentially negative action.

<div class="w3-container w3-section w3-red">
<span onclick="this.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
  <h3>Danger!</h3>
  <p>Red often indicates a dangerous or potentially negative action.</p>
</div>

Displaying a Table

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
Adam Johnson 67 
<table class="w3-table w3-striped w3-bordered w3-border w3-hoverable">
<thead>
<tr class="w3-light-grey">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
</thead>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>67</td>
</tr>
</table>

Basic List

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Hoverable list

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Rounded Image

Norway

<img src="img_fjords.jpg" class="w3-round" alt="Norway">

Circled Image

Norway 

<img src="fjords.jpg" class="w3-circle" alt="Norway">

Bordered Image

Norway 

 <img src="fjords.jpg" class="w3-border w3-padding" alt="Norway">

Hoverable Image

Norway 

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">

Image as a Card

Norway 
<div class="w3-card-4">
  <img src="fjords.jpg"  alt="Norway">
</div>

Image Text

Norway
Top Left
Top Right
Bottom Left
Bottom Right
Middle
<div class="w3-display-container">
  <img src="fjords.jpg"  alt="Norway">
  <div class="w3-display-topleft w3-container w3-text-red">Top Left</div>
  <div class="w3-display-topright w3-container w3-text-red">Top Right</div>
  <div class="w3-display-bottomleft w3-container w3-text-red">Bottom Left</div>
  <div class="w3-display-bottomright w3-container w3-text-red">Bottom Right</div>
  <div class="w3-display-middle w3-large w3-text-red">Middle</div>
</div>

Displaying Badges

Updates 9

News 6

Comments 8

<p>Updates <span class="w3-badge">9</span></p>
<p>News <span class="w3-badge w3-green">6</span></p>
<p>Comments <span class="w3-badge w3-red">8</span></p>

Displaying Tags

Comments Done

Example New!

Comments More Later!

<p>Comments <span class="w3-tag">Done</span></p>
<p>Example <span class="w3-tag w3-blue">New!</span></p>
<p>Comments <span class="w3-tag w3-teal">More Later!</span></p>

Modal As a Card

×

Some text. Some text. Some text.

Some text. Some text. Some text.

<button onclick="document.getElementById('id02').style.display='block'" class="w3-btn">Open Modal</button>

<div id="id02" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id02').style.display='none'" class="w3-closebtn">&times;</span>
      <p>Some text. Some text. Some text.</p>
      <p>Some text. Some text. Some text.</p>
    </div>
  </div>
</div>

Modal Image

Click on the image to display it in full size:

× 
<p>Click on the image to display it in full size:</p>

<img src="img_fjords.jpg" style="width:30%;cursor:zoom-in"
onclick="document.getElementById('modal01').style.display='block'">

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <span class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">&times;</span>
  <div class="w3-modal-content w3-animate-zoom">
    <img src="img_fjords.jpg" style="width:100%">
  </div>
</div>

Inline Tooltip Text

London 9 million is the capital city of England

<p class="w3-tooltip">London
<span class="w3-text">9 million</span>
is the capital city of England</p>

Displaying Code

Example

fruits[0] = "Banana";
fruits[1] = "Apple";
fruits[2] = "Mango";
fruits[3] = "Plum";
<div class="w3-example">
  <h3>Example</h3>
  <div class="w3-code notranslate">
  fruits[0] = "Banana";<br>
  fruits[1] = "Apple";<br>
  fruits[2] = "Mango";<br>
  fruits[3] = "Plum";<br>
  </div>
</div>

The Container Classes

Class Defines
w3-container Container for HTML content (adds 16px padding left and right) Try it
Used with color classes Try it
Used as header Try it
Used as footer Try it
Used with w3-leftbar Try it
Used with w3-bottombar Try it
w3-section Container for HTML content (adds 16px margin top and bottom) Try it
w3-badge Circular badge 8 Try it
w3-tag Rectangular tag More Later ! Try it
w3-ul Unordered list Try it
w3-display-container Container for w3-display-classes (position an element in the top left, top right, bottom left or the bottom right corner, or in the middle of the container) Try it
w3-blockquote Removed in 2.0 (use w3-leftbar instead) Try it
w3-example Example container Try it
w3-code Code container Try it
w3-progress-container Progress bar container Try it

Table Classes

Class Defines
w3-table Container for an HTML table Try it
w3-striped Striped table Try it
w3-border Bordered table Try it
w3-bordered Bordered lines Try it
w3-centered Centered table Try it
w3-hoverable Hoverable table Try it
w3-table-all All properties set Try it
With w3-striped, w3-border, and w3-bordered Try it
With colored head Try it
With w3-responsible Try it
With w3-tiny Try it
With w3-small Try it
With w3-large Try it
With w3-xlarge Try it
With w3-xxlarge Try it
With w3-xxxlarge Try it
With color Try it
With w3-jumbo Try it

Card Classes

Class Defines
w3-card Container for any HTML content (With border) Try it
w3-card-2 Container for any HTML content (2px bordered shadow) Try it
w3-card-4 Container for any HTML content (4px bordered shadow) Try it
w3-card-8 Container for any HTML content (8px bordered shadow) Try it
w3-card-12 Container for any HTML content (12px bordered shadow) Try it
w3-card-16 Container for any HTML content (16px bordered shadow) Try it
w3-card-24 Container for any HTML content (24px bordered shadow) Try it

Responsive Classes

Class Defines
w3-row Container for one row of fluid responsive content Try it
w3-row-padding Row where all columns have a default padding Try it
w3-content Container for fixed size centered content Try it
w3-half Half (1/2) screen column container Try it
w3-third Third (1/3) screen column container Try it
w3-twothird Two third (2/3) screen column container Try it
w3-quarter Quarter (1/4) screen column container Try it
w3-threequarter Three quarters (3/4) screen column container Try it
w3-col Column container for any HTML content Try it
l1 - l12 Responsive sizes for large screens Try it
m1 - m12 Responsive sizes for medium screens Try it
s1 - s12 Responsive sizes for small screens Try it
w3-hide-small Hide content on small screens (less than 601px) Try it
w3-hide-medium Hide content on medium screens Try it
w3-hide-large Hide content on large screens (larger than 992px) Try it

Navigation Classes

Class Defines
w3-navbar Navigation bar Try it
Collapsible navigation bar Try it
w3-topnav Top navigation bar Try it
w3-sidenav Side navigation bar Try it
Side navigation bar overlaying main content Try it
Side navigation bar overlaying all main content Try it
Side navigation bar shifting main content to the right Try it
Side navigation bar with an overlay background Try it
w3-collapse Fully automatic responsive side navigation Try it
w3-dropnav Dropdown navigation Try it
w3-dropdown-click Clickable dropdown element Try it
w3-dropdown-hover Hoverable dropdown element Try it
Hoverable dropdown element (used in w3-navbar) Try it
Hoverable dropdown element (used in w3-sidenav) Try it
Hoverable dropdown element (used in w3-topnav) Try it
w3-accordion Hide and show collapsible content Try it
Clickable accordion and dropdown used in w3-sidenav Try it
w3-pagination Pagination links Try it

Button Classes

Class Defines
w3-btn Rectangular HTML button Try it
Rectangular HTML button with ripple effect Try it
w3-btn-floating Circular floating button Try it
Circular floating button with ripple effect Try it
w3-btn-group Grouped buttons Try it
w3-btn-bar Button bars (similar to grouped buttons, except for different background-color and hover effects) Try it
w3-btn-block Full-width buttons (100%) Try it

Input Classes

Class Defines
w3-form Same as w3-padding Try it
Input form as a card Try it
w3-input Input elements Try it
Input elements (top labels) Try it
Input elements (bottom labels) Try it
w3-group Group of HTML elements Try it
w3-label Input label Try it
w3-validate Validates input (Changes color when invalid input) Try it
w3-check Checkbox input type Try it
w3-radio Radio input type Try it
w3-select Input select element Try it
w3-animate-input Animates the width of an input to 100% Try it

Modal Classes

Class Defines
w3-modal Modal container Try it
w3-modal-content Modal pop-up element Try it
w3-tooltip Tooltip element Try it
w3-text Tooltip text Try it

Animation Classes

Class Defines
w3-animate-top Animates an element from the top -300px to 0px Try it
w3-animate-left Animates an element from left -300px to 0px Try it
w3-animate-bottom Animates an element from the bottom -300px to 0px Try it
w3-animate-right Animates an element from right -300px to 0px Try it
w3-animate-opacity Animates an element's opacity from 0 to 1 Try it
w3-animate-zoom Animates an element from 0 to 100% in size Try it
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out) Try it
w3-spin Spin an icon 360 degrees Try it
Spin any element 360 degrees Try it
w3-animate-input Animates the width of an input field to 100% Try it

Utility Classes

Class Defines
w3-tiny Specifies a font size of 10 pixels Try it
w3-small Specifies a font size of 12 pixels Try it
w3-large Specifies a font size of 20 pixels Try it
w3-xlarge Specifies a font size of 24 pixels Try it
w3-xxlarge Specifies a font size of 32 pixels Try it
w3-xxxlarge Specifies a font size of 48 pixels Try it
w3-jumbo Specifies a font size of 64 pixels Try it
w3-slim Specifies a slimmer text Try it
w3-wide Specifies a wider text Try it
w3-vertical Specifies vertical text Try it
w3-top Fixed content on top of page Try it
w3-center Centered content Try it
w3-circle Circled content Try it
w3-hide Hidden content (display:none) Try it
w3-show Show content (display:block) Try it
w3-show-block Alias of w3-show (display:block) Try it
w3-show-inline-block Show content as inline-block (display:inline-block) Try it
w3-hide-small Hide content on small screens (less than 601px) Try it
w3-hide-medium Hide content on medium screens Try it
w3-hide-large Hide content on large screens (larger than 992px) Try it
w3-left Left adjusted content Try it
w3-right Right adjusted content Try it
w3-left-align Left aligned text Try it
w3-right-align Right aligned text Try it
w3-justify Right and left aligned text Try it
w3-display-container Container for w3-display-classes (position: relative) Try it
w3-display-topleft Position content in the top left corner Try it
w3-display-topright Position content in the top right corner Try it
w3-display-bottomleft Position content in the bottom left corner Try it
w3-display-bottomright Position content in the bottom right corner Try it
w3-display-middle Position content in the middle (horizontally and vertically) Try it
w3-display-topmiddle Position content in the middle at the top of the element Try it
w3-display-bottommiddle Position content in the middle at the bottom of the element Try it
w3-serif Changes the font to serif Try it
w3-opacity Adds opacity to text Try it
Adds opacity to any element Try it
w3-overlay Creates an overlay effect Try it
w3-text-shadow Adds shadows to text Try it

Color Classes

Class Defines
w3-red Background color red Try it
w3-pink Background color pink Try it
w3-purple Background color purple Try it
w3-deep-purple Background color deep purple Try it
w3-indigo Background color indigo Try it
w3-blue Background color blue Try it
w3-light-blue Background color light blue Try it
w3-cyan Background color cyan Try it
w3-aqua Background color aqua Try it
w3-teal Background color teal Try it
w3-green Background color green Try it
w3-light-green Background color light green Try it
w3-lime Background color lime Try it
w3-sand Background color sand Try it
w3-khaki Background color khaki Try it
w3-yellow Background color yellow Try it
w3-amber Background color amber Try it
w3-orange Background color orange Try it
w3-deep-orange Background color deep orange Try it
w3-blue-grey Background color blue grey Try it
w3-brown Background color brown Try it
w3-light-grey Background color light grey Try it
w3-grey Background color grey Try it
w3-dark-grey Background color dark grey Try it
w3-black Background color black Try it
w3-pale-red Background color pale red Try it
w3-pale-yellow Background color pale yellow Try it
w3-pale-green Background color pale green Try it
w3-pale-blue Background color pale blue Try it
w3-transparent Transparent background-color

Hover Classes

All the colors above can also be used as hover classes:

Class Defines
w3-hover-white Hover color white Try it
w3-hover-black Hover color black Try it
w3-hover-red Hover color red Try it
w3-hover-blue Hover color blue Try it
w3-hover-green Hover color green Try it
w3-hover-aqua Hover color aqua Try it
w3-hover-orange Hover color orange Try it
w3-hover-grey Hover color grey Try it
w3-hover-pale-green Hover color pale green Try it
w3-hover-text-red Hover text color red Try it
w3-hover-text-blue Hover text color blue Try it
w3-hover-text-green Hover text color green Try it
w3-hover-text-purple Hover text color purple Try it
w3-hover-border-color Hover border color Try it
w3-hover-opacity Adds transparency to an element on hover (60% opacity) Try it
w3-hover-shadow Adds shadow to an element on hover Try it
w3-hover-none Removes hover effects from an element Try it

Round Classes

Class Defines
w3-round Element rounded (border-radius) 4px Try it
w3-round-small Element rounded (border-radius) 2px Try it
w3-round-medium Element rounded (border-radius) 4px Try it
w3-round-large Element rounded (border-radius) 8px Try it
w3-round-xlarge Element rounded (border-radius) 16px Try it
w3-round-xxlarge Element rounded (border-radius) 32px Try it
w3-round-jumbo Element rounded (border-radius) 64px Try it

Padding Classes

Class Defines
w3-padding-0 Removes all padding from an element Try it
w3-padding Padding 8px top and bottom, and 16px left and right. Try it
w3-padding-tiny Padding 2px top and bottom, and 4px left and right. Try it
w3-padding-small Padding 4px top and bottom, and 8px left and right. Try it
w3-padding-medium Padding 8px top and bottom, and 16px left and right. Try it
w3-padding-large Padding 12px top and bottom, and 24px left and right. Try it
w3-padding-xlarge Padding 16px top and bottom, and 32px left and right. Try it
w3-padding-xxlarge Padding 24px top and bottom, and 48px left and right. Try it
w3-padding-jumbo Padding 32px top and bottom, and 64px left and right. Try it
w3-padding-top Padding top 8px Try it
w3-padding-right Padding right 16px Try it
w3-padding-bottom Padding bottom 8px Try it
w3-padding-left Padding left 16px Try it
w3-padding-4 Padding 4px top and bottom Try it
w3-padding-8 Padding 8px top and bottom Try it
w3-padding-12 Padding 12px top and bottom Try it
w3-padding-16 Padding 16px top and bottom Try it
w3-padding-24 Padding 24px top and bottom Try it
w3-padding-32 Padding 32px top and bottom Try it
w3-padding-48 Padding 48px top and bottom Try it
w3-padding-64 Padding 64px top and bottom Try it
w3-padding-128 Padding 128px top and bottom Try it

Margin Classes

Class Defines
w3-margin-0 Removes all margins from an element Try it
w3-margin Margin 16px Try it
w3-margin-top Margin top 16px Try it
w3-margin-right Margin right 16px Try it
w3-margin-bottom Margin bottom 16px Try it
w3-margin-left Margin left 16px Try it

Border Classes

Class Defines
w3-border Borders (top, right, bottom, left) Try it
w3-border-top Border top Try it
w3-border-right Border right Try it
w3-border-bottom Border bottom Try it
w3-border-left Border left Try it
w3-border-0 Removes all borders Try it
w3-border-color Displays any defined borders in a specified color (like red, etc) Try it
w3-bottombar Adds a thick bottom border (bar) to an element Try it
w3-leftbar Adds a thick left border (bar) to an element Try it
w3-rightbar Adds a thick right border (bar) to an element Try it
w3-topbar Adds a thick top border (bar) to an element Try it
w3-hover-border-color Hoverable border color Try it