W3.CSS Borders
I have borders.
I have only a left border.
I have a green top and bottom border.
I have blue borders.
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>
Thick Borders
The w3-topbar, w3-bottombar, w3-leftbar, and w3-rightbar classes are used to add thick borders to an element:
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:
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 »
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>
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>
