Sept. 20, 1998

Putting Style Sheets in Perspective

border-width

Border-width values may be specified for all four border edges together, or the four sides may be set individually. When the allowed value of thin, medium or thick is used, the exact value will be interpreted by the user agent. The value will remain constant throughout the document; medium will be thicker than thin and thick will be thicker than medium.

Note: It's been my experience that not all browsers will display the border unless you also include the
{border-style: solid;}
property.

Initial Value:
medium
Allowed Values:
thin
medium
thick
<length>
<percentage>
none
{1,4}
Applies to:
all elements
Inherited?:
no

The border-[side]-width properties will set only that side that is specified in the property. The border-width property will set all four sides at the same time, or any combination of the sides.

Properties:

  • border-left-width
  • border-right-width
  • border-top-width
  • border-bottom-width
  • border-width 
.bp{
	border-style		: solid;
	border-left-width 	: thin;
	border-top-width 	: thick;
	border-right-width 	: thin;
	border-bottom-width 	: thick;
	}

Which is the same as: 

.bp {
   border-width : thick thin; 
   border-style : solid; 
	}

border-width

All but the border-width property sets only the side specified in that property; the border-width property may be used to specify all four sides at the same time, or any combination thereof.

Just for fun, I've created four separate boxes demonstrating the different affects that can be achieved by varying the border-width values. Each box contains the rule that generated that particular box.


all sides are set the same - {border-width: 2em; }

When two values are specified, the first is applied to the top and bottom, the second is applied to the left and right sides - {border-width: 2em 4em; }

When three values are specified, the first is applied to the top, the second is applied to the left and right sides and the third is applied to the bottom. - {border-width: 2em 4em 6em; }

When four values are specified, they are applied to the top, right, bottom and left, in that order. - {border-width: 2em 4em 6em 8em; }

Additional Resources:

Putting Style Sheets in Perspective: border-style
Putting Style Sheets in Perspective: Marginally Speaking
Putting Style Sheets in Perspective: border-width Shorthand

Up to => Home / Authoring / Style / Sheets / Margins

Guide Keywords Lexicon Site Map Top 100 Tutorials


Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers