How to Add Border to Web Page in Html

How to Add Borders Around a Web Page with CSS

This CSS Tip, using Cascading Syle Sheet, will explain how to add a border to a web page, a box, table or any other block item on your website. If you want to frame a picture see how to add a border around an image with CSS.

How To Create a Border Around a Web Page

Let's assume you want a web page that is 960 pixels wide, centered in the browser window, with a white background and a 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, like is used on Lori's Web Design, that color needs to go in your body tag in the CSS file.

Here is the code for the CSS file

Change the background colors, width or color of the border, and width of padding to suit your own needs.

.container {width:960px;
margin:0 auto;
padding:10px 25px;
border:1px solid #ccc;
background:#fff; }

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 web page. You can change the Hex Color of the border by using a different color number instead of #ccc which is the hex color number for light gray. Change the width of the box by adding another number instead of "width:960px". The padding inside the border adds 10px on top and 25px on each side to add padding on each side of the page. You can use percents for width instead, if you prefer for a responsive design.

Here is the HTML code to put on the web page:

<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

If you want to add a drop shadow to the border see the dropshadow page.

How to Add a Border Around a Text Box, a Paragraph, a Div or Container

You can also add borders to a box, a div, a container or any other block item . The following box is 300 pixels wide, with a white background and a gray border.

Here is the code for the CSS file:

.box300 {width:300px;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #999;
background:#fff; }

Here is the code for your web page:

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

The result should look like this:

Your
Website Content
Goes Here

How to Frame a Web Page

You can also add multiple borders so the web page looks like it's within a frame as in the image on the right. You need a container and then two 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.

Here is the css for a border around a web page about 960px wide:

#container {width:825px;
border:1px solid #966;
margin:0;
padding:0;
.border1 {width:827px;
border:3px solid #963;
margin:1px;
padding:2px;}
.border2 {width:839px;
border:1px solid #966;
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 -->

How to 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. Be aware that CSS3 requires that all formatting for tables should be set up in a CSS file.

For information on how to add different border styles (dashes, dotted, grooved, inset, etc.) see W3's CSS Borders

Return to CSS TIPS

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

How to Add Border to Web Page in Html

Source: https://www.loriswebs.com/css-border-webpage.html

Share this post