Want a different look for your homepage?  Try FRAMING your site with simple CSS.  In the body portion of your CSS, add this:

border-color: silver ;
       border-width:30px ;
       border-style: inset;

OR THIS:

border-color: silver ;
       border-width:30px ;
       border-style: outset;




Using either inset or outset you can create two totally different "frames" made with borders.  Choose the width of your frame just by adjusting the number 30, and choose your own color too.

Here's a list of border styles to play with:

dotted - Defines a dotted border. Renders as solid in most browsers
dashed- Defines a dashed border. Renders as solid in most browsers
solid - Defines a solid border
double - Defines two borders. The width of the two borders are the same as the border-width value
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value



NOTE:  THIS DOES WORK IN FIREFOX, IE, and probably other browsers as well.

In this series I will try to explain the CSS basics. It's hard to discuss all the properties and options in just one tutorial, so I will add more posts eventually. Make sure you also check out CSS Logics and Multiply Design 101 in the group for additional info.

Let's start with the box model. CSS uses a very simple box model when you can control the dimensions, padding, border and margin. From the W3.org website:

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

The margin, border, and padding can be broken down into top, right, bottom, and left segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

content edge or inner edge

The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.

padding edge

The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

border edge

The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. The four border edges define the box's border box.

margin edge or outer edge

The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge. The four margin edges define the box's margin box.

Each edge may be broken down into a top, right, bottom, and left edge.

The dimensions of the content area of a box — the content width and content height — depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.

The background style of the content, padding, and border areas of a box is specified by the 'background' property of the generating element. Margin backgrounds are always transparent.

So basically each selector used in the CSS code refers to a box on your page. Boxes can be put one over the another, moved and so on. Besides it's dimensions, you can also change its position, either relative to other boxes or make it absolute so you can position it using X (horizontal) and Y (vertical) coordinates like the ones you use in a Mathematics graph.

Below are the most common %elements used in boxes and possibles values (you can search on the internet for more info using something like 'css background' etc):


dimensions
To configure a box size, you can use numerical values (100px, 480px, etc), auto or percentage values with:
- height: Sets the height
- line-height: Sets the distance between lines
- max-height: Sets the maximum height
- max-width: Sets the maximum width
- min-height: Sets the minimum height
- min-width: Sets the minimum width
- width: Sets the width of an element
Example (sets the height of the box that contains the Page Title and nav menu)
div.owner_nav {
height: 199px;
background: none;
}

display
The values of this property have the following meanings:
- block: This value causes an element to generate a block box.
- inline: This value causes an element to generate one or more inline boxes.
- none: This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout and it's not displayed at all).
Example (hides the icons in the top nav bar/header):
li.gnopt a img, li.gnoptsel a img { display: none; }


visibility
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether). Values have the following meanings:
- visible: The generated box is visible.
- hidden: The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible if they have 'visibility: visible'.


overflow
Controls how the content that does not fit the box dimensions will be handled. You can use:
- visible: Default. The content is not clipped. It renders outside the element
- hidden: The content is clipped, but the browser does not display a scroll-bar to see the rest of the content
- scroll: The content is clipped, but the browser displays a scroll-bar to see the rest of the content
- auto: If the content is clipped, the browser should display a scroll-bar to see the rest of the content
Example (add scrollboxes to replies when they contain long text lines or images):
.reply {
overflow: auto;
}


position
- static: Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations);
- relative: An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position;
- absolute: An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties;
- fixed: An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling.

Example (position the Page Title):
h1#page_owner_title {
position:absolute;
left:100px;
top:150px;
}


color
The foreground color, mostly for text. You can use a value like #FFF or #C0C0C0 or a name like red or transparent. Example (color for the main text on your page):
body {
color: black;
}


background
The background color and/or image. Example (general page background):
body {
background: white url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
}

You can set the image and color separately, like this (in this case the order does not matter):
body {
background-image: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background-color: white;
}

Remember that if you use the same statement only the last one will be used, so this will make your background be only blue (no image):
body {
background: url(http://images.multiply.com/multiply/logo/logo-on-letters-70.png);
background: darkblue;
}

For the background image, you can also use some other properties:
- background-attachment
values: fixed or scroll
- background-position
values: top, bottom, right, left, center or value
- background-repeat
values: no-repeat, repeat, repeat-x, repeat-y

You can also combine them in just one line, like this:
background: darkblue url(Image_URL) fixed no-repeat center;


border
Sets the color, type and thickness of the border (click here for a tutorial in the group).
Example (sets the rail border):
.rail {
border: 2px solid black;
}


margin and padding
The margin and the padding values can be set in just one line in the order "top right bottom left", one value for all the dimensions or separated in different lines. For example:

padding: 10px 5pix 12px 0px;

is the same as:

padding-top: 10px;
padding-right: 5px;
margin-bottom: 12px;
margin-left: 0px;

As you may already know, you can also do the same to change the border for just one part of the box (put a border bellow the titles on your main page):
.itemboxsub {
border-bottom: 2px dotted #fff;
}


If you want to suppress an %element, you can use:
- transparent for the color. Example (content boxes on the main page with no background):
.itembox {
background: transparent;
}

- none when you may have multiple parameters, like 'background-image' or 'border'. Example (no border and no background image in the rail):
.rail {
background: none;
border: none;
}

- 0 when you have values, like 'padding' and 'margin'. Example (no margin for the itemboxes):
.itembox {
margin: 0;
}


To remove the background completely (make it totally transparent), you can use:
background-color: transparent;
background-image: none;

or:
background: transparent none;


For a quick reference about the most used commands, see this page at w3schools.com.

This is an excellent site I found that deals with different types and appearances of borders,  and the css codes to use on your site.

At the bottom of the page, there is also a place to TEST them there.

Take a look at the different options you have to create new looks!

CLICK HERE