Latest web development tutorials
 

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.


I have a blue leftbar.

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:

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 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 13 million inhabitants.

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 13 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 13 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 13 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 13 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 13 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 13 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 13 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 13 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 13 million inhabitants.</p>
</div> 
Try It Yourself »

Displaying Quotes

The w3-container class can be use to display quotes.

"Make it as simple as possible, but not simpler."

Albert Einstein


"Make it as simple as possible, but not simpler."

Albert Einstein


"Make it as simple as possible, but not simpler."

Albert Einstein

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


Red bars that turns green on hover.

Example

<div class="w3-container w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div>
Try It Yourself »

Displaying Code

HTML Example

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
Try It Yourself »

CSS Example

<div class="w3-code cssHigh">

.. CSS code here

</div>
Try It Yourself »

JavaScript Example

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
Try It Yourself »