How to Add Borders Around a Web Page 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

Let's assume you want a webpage that is 900 pixels wide, centered in the browser, 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:
The Margin-left and Margin-right will center the div on the page or parent container.

Here is the code for the webpage:


The result should look like this:

Frame a Web Page

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. Notice the outer border allows the page to be centered within the broswer screen. Play with the widths or colors to make it fit your color scheme. You can see the page frame on Millcreek Construction.

Here is the css:


Here is the HTML:

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:


Here is the code for your webpage:


The result should look like this:

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:


Here is the code for your webpage:


The result should look like this.

Your

Website

Content

Goes Here

Lori's Web Design
Copyright © August 28, 2009 - updated 2011-11-12
All Rights Reserved

Return to CSS TIPS or see frequently updated Seo Tips on my home page