Border Ideas For Web Page Design

Border Ideas For Web Page Design
Page content

Basic HTML Border Technics

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:

Cell 1Cell 2

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
  2. Horizontal Rule with Increased size of 10 pixels
  3. Horizontal Rule using styles with a thickness of 10 pixels

Better Borders Using CSS

border styled image

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: