Gradient Colored Border

Here is a neat effect using Cascade Style Sheets that can be used to enhance your web pages. The PC browser that does not support CSS3 Gradient Color will only see the background color that you have selected for the border and not the Grad Color effect. As you may have surmised, the page will be written entirely using css coding. Don't let this deter you as the construction of the page is really quite simple and the effect is worth the effort.

Page Construction

The first step is to create the basic outline for our page which has five components.
  1. Style section where the style coding is located
  2. The body section
  3. Main page division
  4. Side bar
  5. Content
<style> body #main #sidebar The next step is to create a class to hold the coding necessary to produce the gradient effect. This is a good place to insert the coding. Then the sidebar div will reference this class to display it. A height of 1320px was chosen to accommodate the various screen resolutions.

Notice that there is only one class required with two colors but four color stops to achieve the tubular effect. When using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. Negative angles run in the counterclockwise direction.

#content </style>


The color for the for the tubular effect can be any of your choosing but the start and end of the gradient color code and the body color must the same color to produce the proper border effect. The Professor's Color List is good place to choose your colors from. You can vary the background color and check various text colors.

The Code

It is important that the order of the opening divs and the closing divs be followed to create the desired effect. Now lets construct a page using an image for the Sidebar.

Image Bordered Sidebar