W3.CSS Borders
Border Classes
The W3.CSS border classes can be used on any HTML elements.
I have borders on all sides.
I have a red bottom border
I have rounded borders.
Example
<div class="w3-border">
<p>I have borders on all sides.</p>
</div>
<div class="w3-border-bottom w3-border-red">
<p>I have
a red bottom border.</p>
</div>
<div class="w3-border
w3-round-xlarge">
<p>I have rounded borders.</p>
</div>
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>I have a blue leftbar.</p>
</div>
Try It Yourself »
Displaying Notes
Notes are often displayed with a pale color and a colored bar:
Example
<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Try It Yourself »
Displaying Panels
Panels can be displayed in a million different ways:
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<div class="w3-container w3-light-grey w3-border">
<p>London is the
most populous city in the United Kingdom,
with a metropolitan area
of over 9 million inhabitants.</p>
</div>
Try It Yourself »
Displaying Quotes
The w3-container class can be used to display quotes.
Example
<div class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make it
as simple as possible, but not simpler."</i></p>
<p>Albert
Einstein</p>
</div>
Try It Yourself »
If you use HTML <blockquote>, remember that HTML will add an extra left margin:
"Make it as simple as possible, but not simpler."
Albert Einstein
Example
<blockquote class="w3-container w3-leftbar w3-light-grey">
<p><i>"Make
it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
Try It Yourself »
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
Example
<div class="w3-container w3-border w3-hover-border-red">
<p>Red
hoverable border</p>
</div>
Try It Yourself »
