How to Add Borders with CSS

This CSS tip will explain how to add a border around the edge of the main container on your webpage, or a box or table or any other item on your website.

Add a Border Around a Webpage

Lets assume you want a webpage that is 900 pixels wide, centered in the browser, with a white background and light gray border. We will call this a "Container" and apply the css to that class. If you want a different colored background for the rest of the page that needs to go in your body tag in css file.

Here is the code for the CSS file:

.container {width:900px;
margin-left:auto;
margin-right:auto;
border:1px solid #cccccc;
background:#ffffff; }

Here is the code for the webpage:

<div class="container">
Your Website Content Goes Here
</div>

The result should look like this:

Your
Website Content
Goes Here

Add a Border Around a Box

You can do the same thing with a box. This box is 200 pixels wide, with a white background and a light gray border.

Here is the code for the CSS file:

.box200 {width:200px;
margin-left:auto;
margin-right:auto;
border:1px solid #cccccc;
background:#ffffff; }

Here is the code for your webpage:

<div class="box200">
Your Website Content Goes Here
</div>

The result should look like this:

Your
Website Content
Goes Here

Add a Border Around a Table

If you'd like to add a border around the outside of a table (instead of every table cell) just set up a class for border and apply it to your main table cell:

Here is the code for the CSS file:

.border {border:1px solid #cccccc;}

Here is the code for your webpage:

<table align="center" width="600" cellpadding="0" border="0" class="border">
<tr><td>
Your Website Content Goes Here
</td></tr></table>

The result should look like this.

Your

Website

Content

Goes Here

Return to CSS TIPS