Home arrow DHTML arrow Page 2 - Borders and More with Style Sheets

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
  1. · Borders and More with Style Sheets
  2. · Even More on Borders
  3. · Alphabetical Property Reference: Bottom
  4. · Clear Property

print this article

Borders and More with Style Sheets - Even More on Borders
(Page 2 of 4 )

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 widths. You may supply one to four space-delimited width length values. The number of values determines which sides receive the assigned widths.

CSS Syntax

border-width: thin | medium | thick | length {1,4}


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

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

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       medium


h1 {border-style: ridge; border-width: 3px 5px 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


blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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