Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 »


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.