Jan's CSS: Borders

With CSS borders you can control the width and color of a border plus other characteristics like rounded corners and shadows.

You can set the border for each side separately if you wish. That is particularly helpful when you need a dividing line on just one side.

Syntax:

For a simple border you can use a shorthand property that combines three properties:

border: width style color;

• Border-width is the thickness of the border in pixels.
• Border-style is solid, dashed, dotted, groove, inset, outset, or none.
• Border-color can be an HTML color like #ff0000, an RGB color like rgb(255,0,0), or a named color like red.

For example, the BORDER property below creates a dotted border around its element:

border: 4px dotted blue;

If you want to set the characteristics separately:

If you want to set a characteristic for just one side, instead of border: use border-left: , border-right: , border-top:, or border-bottom:

New for CSS3-- Border Image: Too cool to leave out! This property is not supported yet by all of the common browsers, but most have their own version. In the sample code below, the property names with leading hyphens like -webkit-border-image tell the browser to use its own version of the border-image property. The image usually has a transparent center plus you have to set a border-width that is wide enough to hold the design. The repeat property can have values round, stretch, or repeat. The middle image on the side is used for the repeat.

Syntax:

Original image used for the border with transparent center:  

Full Code for the first example:

You do not always get the same effect in every browser. So be careful to check what the major browsers do with your border-image choices.