LWD logoLori's Web DesignLWD logo

How to Add Borders Around a Web Page with CSS


Recent Visitors.

Thanks for visiting

This CSS tip will explain how to add a border around the edge of your browser window, main container on your webpage, a box or table or any other block item on your website. If you want to frame a picture see how to design a border around an image with CSS.

Create a Border Around a Webpage

Let's assume you want a webpage that is 900 pixels wide, centered in the browser window, with a white background and light gray border or frame. We will call this CSS class 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 the CSS file.

Here is the code for the CSS file:

.container {width:900px;
      margin:0 auto 0 auto;
      padding:5px;
      border:1px solid #cccccc;
      background:#ffffff; }

Here is HTML code to put on the webpage:

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

The result should look like this (the width of this box is set at 500 pixels being as I'm not using it to border the whole web page in this sample):

Your
Website Content
Goes Here

The setting for "margin" tells the browser to add 0 pixels of margin on top and bottom sides and center the box horizontally or in the middle of the page. You can change the color of the border by using a different color number instead of #cccccc; which is the number for light gray. Change the width of the box by adding another number instead of "width:900px". You can also change the padding inside the box.

Frame a Web Page

page with a triple border You can also add multiple borders so the page looks like it's within a frame as in the image on the right. You need a container and then 2 borders with varying padding or margin widths. Only the outer border has a setting for the margin that allows the page to be centered within the broswer screen. The other borders don't need the margin set. Play with the widths or colors to make it fit your color scheme. You can see a web page with a frame on Millcreek Construction.

Here is the css:

#container {width:825px;
      border:1px solid #996666;
      margin:0;
      padding:0;
.border1 {width:827px;
      border:3px solid #996633;
      margin:1px;
      padding:2px;}
.border2 {width:839px;
      border:1px solid #996666;
      margin:12px auto 12px auto;}

Here is the HTML:

<div class="border2">
<div class="border1">
<div id="container">

Content goes here

</div> <!-- End Container -->
</div> <!-- End Border1 -->
</div> <!-- End Border2 -->


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 blue border.

Here is the code for the CSS file:

.box200 {width:200px;
      margin:0 auto 0 auto;
      padding:5px;
      border:1px solid #3399ff;
      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

Follow Me on Pinterest


Return to CSS TIPS

order SEO analysis

Lori's Web Design
Copyright © August 28, 2009 - updated 4-13-13
All Rights Reserved

Twitter     My blog     Google+     Wordpress blog     Facebook     linked in