Home arrow DHTML arrow Borders and More with Style Sheets
DHTML

Borders and More with Style Sheets


If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the third part of a series, covers borders, bottom edges, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 16
September 13, 2007
TABLE OF CONTENTS:
  1. · Borders and More with Style Sheets
  2. · Even More on Borders
  3. · Alphabetical Property Reference: Bottom
  4. · Clear Property

print this article
SEARCH DEVARTICLES

Borders and More with Style Sheets
(Page 1 of 4 )

Alphabetical Property Reference: Border continued

border-bottom-width, border-left-width, border-right-width, border-top-width


Figure 4-1.  Border-style gallery

CSS Syntax

border-bottom-width: thin | medium | thick | length
border-left-width: thin | medium | thick | length
border-right-width: thin | medium | thick | length
border-top-width: thin | medium | thick |
length

Value

Three constants—thin | medium | thick —allow the browser to define how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter).

Initial Value       medium

Example

h2 {border-bottom-width: 2px}
div {border-left-width: thin}
p.special {border-right-width: 0.5em}

border-collapse

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.borderBottomWidth [window.]document.getElementById("elementID").style.borderLeftWidth [window.]document.getElementById("elementID").style.borderRightWidth [window.]document.getElementById("elementID").style.borderTopWidth

border-collapse
IE 5(Win) NN n/a Moz all Saf all Op all CSS 2

Inherited: Yes

Sets whether borders of adjacent table elements (cells, row groups, column groups) are rendered separately or collapsed (merged) to ignore any padding or margins between adja cent borders. A table set to the separate border model may also have its border-spacing and empty-cells style properties set (if supported by the target browsers).

CSS Syntax

border-collapse: collapse | separate.

Value                        Constant values: collapse | separate.

Initial Value          separat e

 Applies To               The table element .

border-color
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

This is a shortcut property that lets you set multiple border edges to the same or different colors. Navigator 4 allows only a single value, which applies to all four edges. For other supporting browsers, you may supply one to four space-delimited color values. The number of values determines which sides receive the assigned colors.

CSS Syntax

border-color: color {1,4}

Value

For modern browsers, this property accepts one, two, three, or four color  values, depending on how many and which borders you want to set with specific colors. Value quantities and positions are interpreted as shown in the following table.

border-spacing

 
Number of values Effect
1 All four borders set to value
2 Top and bottom borders set to the first value, right and left borders set to the second value
3 Top border set to first value, right and left borders set to second value, bottom border set to third value
4 Top, right, bottom, and left borders set, respectively

Initial Value

The element’s color style property (which is inherited if not specifically assigned for the element).

Example

h2 {border-color: red blue red}
div {border-color: red rgb(0,0,255) red}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.borderColor

border-spacing
IE n/a NN n/a Moz all Saf all Op all CSS 2

Inherited: No

Determines the size of the space (if any) between all cell borders in a table. This property requires that the border-collapse property be set to separate (which is typically the default value). If you include only one length value, it applies to both the horizontal and vertical cell spacing; for two values, the first applies to the horizontal and the second to the vertical. See Figure 4-2 for a synopsis of a table’s numerous dimension definitions.


Figure 4-2.  The geometry of a table element

CSS Syntax

border-spacing: length[length]

border-style

Value

See the discussion of length values at the beginning of this chapter. If you want no spacing along one axis, set its value to zero.

Initial Value       0

Applies To          The table element.

border-style
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

This is a shortcut property that lets you set multiple border edges to the same or different style. For mainstream browsers, you may supply one to four space-delimited border style values. The number of values determines which sides receive the assigned style.

CSS Syntax

border-style: borderStyle {1,4}

Value

Style values are constants that are associated with specific ways of rendering border lines. See border-bottom-style for a list of available values.

The precise manner in which browsers interpret the definitions of the style values is far from universal. Figure 4-1 shows a gallery of all styles as rendered by Internet Explorer 7, Firefox, Safari, and Opera 9. Do not expect the exact same look in all browsers.

This property accepts one, two, three, or four space-delimited borderStyle  values, depending on how many and which borders you want to set with specific styles. Value quantities and positions are interpreted as shown in the following table.

Number of values

Effect

1

All four borders set to value

2 3 4

Top and bottom borders set to the first value, right and left borders set to the second value Top border set to first value, right and left borders set to second value, bottom border set to third value Top, right, bottom, and left borders set, respectively

Initial Value       none

Example

h1 {border-style: ridge; border-width: 3px} div {border-style: solid double; border-width: 4px}

Applies To

All elements, but only block and replaced elements in IE 4 and 5 for Windows.

Object Model Reference

[window.]document.getElementById("elementID").style.borderStyle


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials