Web Page Design: Border Ideas

Traditionally, as far as web page border ideas came, it has been the custom to use basic HTML tables and wrap them in borders. Here is the code for a table with simple border:

<table border='1'><tr><td>Cell 1</td><td>Cell 2</td></tr></table>

The other way is to use the HTML Horizontal Rule to border paragraph content. Effects can be added by manipulating the size and noshade attributes though they are depreciated as of HTML5 which CSS as the preferred method.

The following are different types of Horizontal Rules with different attributes and examples of the effects in the image on the left.

1. Default Horizontal Rule <hr />
2. Horizontal Rule with Increased size of 10 pixels <hr size='10' noshade />
3. Horizontal Rule using styles with a thickness of 10 pixels <hr style='color:red;height:10px;' />

CSS is the preferred method to style elements on web pages. Styling can be done by manipulating individual borders by thickness, color, and styles. Thickness can be in the form of pixels, points or literals sch as thin, medium or thick. Color can be a literal word such as red, yellow, blue or it can be a hexadecimal representations. For example black would be #000000 and red would be #ff0000. Styling for web page borders include dotted, dashed, solid, double, groove, etc. Border Objects include but not limited to border,border-right, border-top and border-width.

To use these attributes you need to identify them with the border object like this

border object: <thickness> <style> <color>; so a real example would be:

border-right: 5px dotted #ff000;

This would give us a red border which is 5 pixels thick and is dotted. One way of using such a border is to style an image as shown in the example that is bordering the image on the left.

Another web page border idea though not as common as plain CSS is to use images. Using anything from one or more images you will be able to style a section of a web page with rich borders. The trick here is to use an image editing software such as Adobe Photoshop to literally draw the containers with the desired border then cut them out and use them on the web page. These borders can be created by using a single image of fixed size or multiple images joined together using CSS styling. Using images happens to be the way to get the richest type of borders that are expected to look the same across all major web browsers as the example on the left shows a container with a border that has a glow. When using images you also need to remember to optimize the images for size.

There is a technique one can use to solve the problem of getting rounded corners when thinking about web page border ideas. It has never been straight forward trying to get Rounded corners on a container on a web page because there was no inbuilt way of doing this. So to get a backward compatible way of doing this other than using images is to use multiple DIV containers and manipulating their positioning and width to get the desired effect. You would need to stack up at least nine DIV containers to achieve this. The image on the left shows an example of rounded corners from stacked divs.

When using DIV containers you can also achieve shadow effects on the borders you use on your web page by manipulating the offset and opacity of one of the two DIVs that are needed for this.