Home arrow DHTML arrow Page 4 - Learning Style Sheet Properties
DHTML

Learning Style Sheet Properties


In this second part of a series on style sheet properties, you'll learn how to handle code for backgrounds, borders, and more. This article 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 / 7
September 06, 2007
TABLE OF CONTENTS:
  1. · Learning Style Sheet Properties
  2. · Alphabetical Property Reference
  3. · Alphabetical Property Reference through Behavior
  4. · Alphabetical Property Reference: Border

print this article
SEARCH DEVARTICLES

Learning Style Sheet Properties - Alphabetical Property Reference: Border
(Page 4 of 4 )

border
IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: No

This is a shorthand property for setting the width, style, and/or color of all four borders around an element in one assignment statement. Whichever properties you donít explicitly set with this property assume their initial values. Numerous other properties allow you to set the width, style, and color of individual edges or groups of edges, if you donít want all four edges to be the same.

Due to differences in the way browsers define their default behavior with regard to borders, every style sheet border rule should include the width and style settings. Failure to specify both properties may result in the border not being seen in one browser or the other.

CSS Syntax

border: border-width || border-style || color | transparent

Value

For the border-width  and border-style  property values, see the respective properties in this chapter. For details on the color  value, see the section about colors at the beginning of this chapter.

Initial Value       None.

Example          p {border: 3px groove darkred}

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.border

border-bottom, border-left, border-right, border-top IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: No

All four properties are shorthand properties for setting the width, style, and/or color of a single border edge of an element in one assignment statement. Whichever properties you donít explicitly set with this property assume their initial values.

CSS Syntax

border-bottom: border-bottom-width || border-bottom-style || color | transparent border-left: border-left-width || border-left-style || color | transparent
border-right: border-right-width || border-right-style || color | transparent
border-top: border-top-width || border-top-style || color | transparent

Value

For the width and style property values, see the border-bottom-width and border-bottom-style properties in this chapter. For details on the color value, see the section about colors at the beginning of this chapter.

Initial Value       None.

Example

p {border-bottom: 3px solid lightgreen}
p {border-left: 6px solid lightgreen}
p {border-right: 3px solid lightgreen}
p {border-top: 6px solid lightgreen}

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.borderBottom
[window.]document.getElementById("elementID").style.borderLeft
[window.]document.getElementById("elementID").style.borderRight
[window.]document.getElementById("elementID").style.borderTop

border-bottom-color, border-left-color, border-right-color, border-top-color
IE 4 NN n/a Moz all Saf all Op all CSS 2

Inherited: No

Each property sets the color of a single border edge of an element. This power is easy to abuse by mixing colors that donít belong together. See also the border-color property for setting the color of multiple edges in one statement.

border-bottom-style, border-left-style, border-right-style, border-top-style

CSS Syntax

border-bottom-color: color | transparent border-left-color: color | transparent border-right-color: color | transparent border-top-color: color | transparent

Value

For details on the color  value, see the section about colors at the beginning of this chapter. Also transparent.

Initial Value       None.

Example

p {border-bottom-color: gray}
div {border-left-color: #33c088}
p.special {border-right-color: rgb(150, 75, 0)}
h3 {border-top-color: rgb(100%, 50%, 21%)}

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.borderBottomColor [window.]document.getElementById("elementID").style.borderLeftColor [window.]document.getElementById("elementID").style.borderRightColor [window.]document.getElementById("elementID").style.borderTopColor

border-bottom-style, border-left-style, border-right-style, border-top-style
IE 4 NN n/a Moz all Saf all Op all CSS 2

Inherited: No

Each property sets the line style of a single border edge of an element. The edge-specific properties let you override a style that has been applied to all four edges with the border or border-style properties, but the edge-specific setting must come after the other one (in source code order) in the style sheet rule. See also the border-style property for setting the style of multiple edges in one statement.

CSS Syntax

border-bottom-style: style
border-left-style:
style
border-right-style:
style
border-top-style:
style

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

Value

Style values are constants that are associated with specific ways of rendering border lines. Not all browser versions recognize all of the values in the CSS recommendation. Style support is shown in the following table.

Value IE/Windows NN Others CSS
dashed

5.5

6 all 1
dotted

5.5

6 all 1
double 4 4 all 1
groove 4 4 all 1
hidden n/a 6 all 2
inset 4 4 all 1
none 4 4 all 1
outset 4 4 all 1
ridge 4 4 all 1
solid 4 4 all 1

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

Initial Value       none

Example

p {border-style: solid; border-bottom-style: none}
div {border-left-style: ridge}

Applies To             All elements.

Object Model Reference

[window.]document.getElementById("elementID").style.borderBottomStyle [window.]document.getElementById("elementID").style.borderLeftStyle [window.]document.getElementById("elementID").style.borderRightStyle [window.]document.getElementById("elementID").style.borderTopStyle

border-bottom-width, border-left-width, border-right-width, border-top-width
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

Each property sets the width of a single border edge of an element. See also the border-width property for setting the width of multiple edges in one statement.

Please check back next week for the continuation of this article.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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