Tutorials References Menu

W3.CSS Borders

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.

Red border that turns green 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>
Try It Yourself »

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>
Try It Yourself »

Rounded Borders

To add rounded borders, add one of the w3-round-size classes:

I have normal borders.

I have small rounded borders.

I have rounded borders.

I have large rounded borders.

I have xlarge rounded borders.

I have xxlarge rounded borders.

Example

<div class="w3-panel w3-border">
  <p>My borders are normal.</p>
</div>

<div class="w3-panel w3-border w3-round-small">
  <p>My borders are rounded (small).</p>
</div>

<div class="w3-panel w3-border w3-round">
  <p>My borders are rounded.</p>
</div>

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

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

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

Try It Yourself »


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>

Try It Yourself »


Hoverable Borders

The w3-hover-border-color classes change the color of the border on mouse-over:

Border that turns red on hover.

Red border that turns green on hover.

Example

<div class="w3-panel w3-border w3-hover-border-red">
  <p>Border that turns red on hover</p>
</div>

<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
  <p>Red border that turns green on hover</p>
</div>
Try It Yourself »

Thick (invisible) left border that turns green on hover.

Thick (invisible) bottom border that turns green on hover.

Example

<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
  <p>Thick (invisible) left border that turns green on hover.</p>
</div>

<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
  <p>Thick (invisible) bottom border that turns green on hover.</p>
</div>

Try It Yourself »

Thick white (invisible) border that turns green on hover.

Thick white (invisible) border that turns black on hover.

Example

<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
  <p>Thick (invisible) border that turns green on hover.</p>
</div>

<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
  <p>Thick (invisible) border that turns black on hover.</p>
</div>

Try It Yourself »