Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Spacing and Areas : Page 6

Learn to use proper spacing and make good use of your Web pages.


advertisement
Border Style
{border-style: none/solid/double/dashed/dotted/groove/ridge/inset/outset}
The border-style property lets you set the line style of an element's border. Not all of the border styles are supported by all browsers.

None means that there is no border. The border-width is 0.

Solid is a border that consists of a single line segment.



Double is a border made up of two solid lines. The value of the border-width of a double border consists of the two lines and the space between them.

Dashed is a border made up of a series of line segments.

Dotted is a border made up of a series of dots.

Groove is a border that looks like it has been carved into the background.

Ridge is the opposite of groove. This border looks as if it's protruding out of the background, like a speed bump.

Inset is a border that makes its box look like it is embedded in the background.

Outset is a border that makes its box look like it is protruding out of the background.

You can enter one to four values to set different styles for different sides of the border. If there is one value, all four sides are the same style. If there are two values, the first value sets the top and bottom borders, and the second value sets the left and right borders. If there are three values, the first value sets the top border, the second sets the left and right borders, and the third sets the bottom border. If there are four values, the first sets the top border, the second the right border, the third the bottom border, and the fourth the left border.

Black groove, ridge, inset, and outset borders look like solid black borders. It is best to use the border-style property in conjunction with the border-width and border-color properties to ensure that CSS-enabled browsers process it correctly.

Example:

P {border-style: double}

If you are using a CSS-enabled browser, this paragraph has a double border.



P {border-style: ridge}

If you are using a CSS-enabled browser, this paragraph has a ridge border.



P {border-style: solid outset none}

If you are using a CSS-enabled browser, this paragraph has a solid top border, outset right and left borders, and no bottom border.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap