FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

TheBestTutorials.css Borders


Border Classes

The TheBestTutorials.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="subhodaya-border">
  <p>I have borders on all sides.</p>
</div>

<div class="subhodaya-border-bottom subhodaya-border-red">
  <p>I have a red bottom border.</p>
</div>

<div class="subhodaya-border subhodaya-round-xlarge">
  <p>I have rounded borders.</p>
</div>

<div class="subhodaya-container subhodaya-pale-blue subhodaya-leftbar subhodaya-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 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="subhodaya-container subhodaya-pale-blue subhodaya-leftbar subhodaya-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.


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.


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="subhodaya-container subhodaya-light-grey subhodaya-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 subhodaya-container class can be used 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."

Example

<div class="subhodaya-container subhodaya-leftbar subhodaya-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="subhodaya-container subhodaya-leftbar subhodaya-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 TheBestTutorials-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="subhodaya-container subhodaya-border subhodaya-hover-border-red">
  <p>Red hoverable border</p>
</div>
Try It Yourself »