LWD logoLori's Web DesignLWD logo

Add Borders Around Boxes in CSS and HTML Tables

In order to add a shaded or 3 color border around an object with CSS, pick 3 or 4 graduated colors (dark blue, med blue, light blue), and then set up a class in CSS for each color. The 3 color border around the box below is set to 2 pixels in width with 3 graduations of aqua blue color.


Add the following to your CSS file. If you don't have a CSS file then add a style tag within the head tag of your HTML page, changing the names and colors as you desire (see the Hexideximal Web Safe Color Chart for other color choices).

If you are using tables, the table needs to have 0 cellpadding so I have also included what I call a "indent" class. This moves the content of that cell in by 4 em on each side and takes the place of cell padding within the table.

Contents of CSS File    

.content1 {
  margin-left:auto;
  margin-right:auto;
  border:2px solid #000066;   position:relative; }

.content2 {
  margin-left:auto;
  margin-right:auto;
  border:2px solid #006699;   position:relative; }

.content3 {
  margin-left:auto;
  margin-right:auto;
  border:2px solid #00cccc;   position:relative;}

.indent {
margin-left:4em;
margin-right: 4em;}

Add the following to your HTML file. If you're familiar with CSS then put the following inside the div that contains the box or body content. If you're using tables then the 3 divs go inside the main table TD cell. The 3 closing divs need to be placed just before the closing TD cell for that table or before the closing div or box if you design your web pages in CSS.

Contents of HTML File    

<div class="content1">
<div class="content2">
<div class="content3">
<div class="indent">

[- - - Body Content goes here - - -]

</div> </div> </div> </div>

To add a border around the outside of your whole page put the folowing in the CSS body tag. The margins are set to 0 also (change the width and color of the border to suit your needs.


Body {
border:4px solid #006699;
top:0;left:0;
margin:0; padding:0; }




Google
Follow Me on Pinterest

Return to CSS TIPS

Also see How to Add a Border to a Web Page with CSS



Copyright © 3-9-07 - updated 2011-11-19

Lori's Web Design
All Rights Reserved

Twitter     My blog     Google+     Wordpress blog     Facebook