How to Add Colored Borders Around Boxes in CSS and HTML

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; }

Return to HTML Tips page