W3.CSS Borders
W3.CSS Borders
W3.CSS makes it easy to add borders to HTML elements.
You can add borders on all sides or only on selected sides.
This element has a border.
Border Classes
Use these classes to control where a border appears:
| Class | Description |
|---|---|
w3-border |
Adds a border on all sides |
w3-border-top |
Adds a top border |
w3-border-right |
Adds a right border |
w3-border-bottom |
Adds a bottom border |
w3-border-left |
Adds a left border |
w3-topbar |
Adds a thick top border |
w3-rightbar |
Adds a thick right border |
w3-bottombar |
Adds a thick bottom border |
w3-leftbar |
Adds a thick left border |
Border Colors
Combine border classes with w3-border-color classes.
Red border
Green border
Blue border
Example
<div class="w3-panel w3-border w3-border-red">Red border</div>
<div class="w3-panel w3-border w3-border-green">Green border</div>
<div class="w3-panel w3-border w3-border-blue">Blue border</div>
Try it Yourself »
Borders on Different Sides
Side-specific borders are useful when you want to emphasize one edge of an element.
Left border
Right border
Top border
Bottom border
Example
<div class="w3-panel w3-border-top">Top border</div>
<div class="w3-panel w3-border-right">Right border</div>
<div class="w3-panel w3-border-bottom">Bottom border</div>
<div class="w3-panel w3-border-left">Left border</div>
Try it Yourself »
Thick Borders
Use the bar classes when you want a stronger border.
The w3-topbar, w3-bottombar,
w3-leftbar, and w3-rightbarclasses 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>
Border and Background Colors
Borders can be combined with background colors to create stronger visual sections.
Example
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
<h3>Information</h3>
<p>Your account was updated.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-leftbar w3-border-yellow">
<p><b>Warning</b></p>
<p>Your session expires soon.</p>
</div>
For semantic messages, W3.CSS also provides classes such as w3-info, w3-warning, and w3-danger.
Rounded Borders
Combine w3-border with W3.CSS w3-round classes to create softer shapes.
Rounded border
Large rounded border
Example
<div class="w3-panel w3-border w3-round">
<p>Rounded border</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>Large rounded border</p>
</div>
Try it Yourself »
Build a Feature Card
Borders are useful for separating and highlighting content without using heavy background colors.
Pro Plan
For teams that need more storage and collaboration tools.
$19 / month
Example
<div class="w3-card w3-border w3-border-blue w3-round-large">
<div class="w3-container">
<h2>Pro Plan</h2>
<p>For teams that need more storage and collaboration tools.</p>
<p><b>$19 / month</b></p>
<p><button class="w3-button w3-blue">Choose Plan</button></p>
</div>
</div>
Try it Yourself »
What You Have Learned
W3.CSS border classes make it easy to define and highlight elements.
w3-borderadds a border on all sides- Side border classes add borders to selected edges
- Bar classes create thicker borders
- Border color classes control the border color
- Round classes can soften border corners
- Borders can be combined with panels, cards, colors, and buttons
More Examples
Explore more examples to see how w3-border can be used.
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>
Rounded Borders
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>
