W3.CSS Borders

Toggle navigation
TUTORIAL HOME
W3.CSS Borders
❮ Previous Next ❯
I have borders.

I have only a left border.

I have a green top and bottom border.

I have blue borders.

I have a thick left border.

I have a thick blue top and bottom border.

Purple border that turns blue on hover.

W3.CSS Border Classes
W3.CSS provides the following border classes:

Class Defines
w3-border Adds borders (top, right, bottom, left) to an element
w3-border-top Adds a top border to an element
w3-border-right Adds a right border to an element
w3-border-bottom Adds a bottom border to an element
w3-border-left Adds a left border to an element
w3-border-0 Removes all borders
w3-border-color Displays the border in a specified color (like red, blue, etc)
w3-hover-border-color Adds a hoverable border color
w3-bottombar Adds a thick bottom border to an element
w3-leftbar Adds a thick left border to an element
w3-rightbar Adds a thick right border to an element
w3-topbar Adds a thick top border to an element
Adding Borders
The w3-border classes are used to add borders to any HTML element:

I have borders.

I have only a left border.

I have top and bottom borders.

Example
<div class="w3-panel w3-border">
  <p>I have borders.</p>
</div>

<div class="w3-panel w3-border-left">
  <p>I have only a left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom">
  <p>I have top and bottom borders.</p>
</div>
»
Border Colors
The w3-border-color classes are used to add colors to borders:

I have red borders.

I have a blue left border.

I have a green top and bottom border.

I have a red left border and a pale-red background color.

Example
<div class="w3-panel w3-border w3-border-red">
  <p>I have red borders.</p>
</div>

<div class="w3-panel w3-border-left w3-border-blue">
  <p>I have a blue left border.</p>
</div>

<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
  <p>I have a green top and bottom border.</p>
</div>
»
Rounded Borders
To add rounded borders, add one of the w3-round-size classes:

I have rounded borders.

Example
<div class="w3-panel w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>
»
Thick Borders
The w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element:

I have a thick left border.

I have a thick blue left border.

I have a thick blue left border and a pale-blue background color.

I have a thick red top and bottom border and a pale-red background color.

Example
<div class="w3-panel w3-leftbar">
  <p>I have a thick left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue">
  <p>I have a thick blue left border.</p>
</div>

<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
  <p>I have a thick blue left border and a pale-blue background color.</p>
</div>

<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
  <p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
»
Hoverable Borders
The w3-hover-border-color classes change the color of the border on mouse-over:

Red hoverable border

Purple border that turns blue on hover

Thick red left border that turns green on hover.

Example
<div class="w3-panel w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div>

<div class="w3-panel w3-border w3-border-purple w3-hover-border-blue">
  <p>Purple border that turns blue on hover</p>
</div>

<div class="w3-panel w3-pale-red w3-leftbar w3-border-red w3-hover-border-green">
  <p>Thick red left border that turns green on hover.</p>
</div>
»

❮ Previous Next ❯