CSS and XHTML: Borders

A Quick Guide to Borders

Border Styles: The border-style property

There are 8 border styles:

1. solid
2. double
3. groove
4. outset
5. dotted
6. dashed
7. inset
8. ridge

A solid border is a solid lined border around your content. A double border is a double lined border. A dotted border gives you a dotted border. A dashed border gives you a dashed border. A ridge and groove border are self-explanatory like most of them. An outset border looks like it rises from the page, and an inset border looks like it sinks into the page.

You write out the border-style property like this:

border-style: solid;

or

border-style: outset,

etc. 

 

Border Width: The border-width property

You can indicate the border-width using the descriptive words:

1. thin
2. medium
3. thick

You can also indicate the border-width using pixels:

1. 1px
2. 2px
3. etc.

You write out the border-width property like this:

border-width: thin;

or

border-width: 4px;

 

Border Color: The border-color property

The border-color property gives your border color. To indicate the color, you can write in the name of the color, or you can use hex codes or rgb values.

You write out the border-color property like this:

border-color: blue; (color name)

border-color: rgb(0%, 21%, 120%); (rgb value)

border-color: #ff0000; (hex code)

 

Indicating Specific Border Sides:

From the book, Head First HTML: With CSS and XHTML, "Just like margins and padding you can specify border style, width, or color on any side (top, right, bottom, or left). You can specify each side of the border independently."

Here is a list of the border-style/width/color side specific properties:

1. border-top-color
2. border-top-style
3. border-top-width
4. border-bottom-color
5. border-bottom-style
6. border-bottom-width
7. border-right-color
8. border-right-style
9. border-right-width
10. border-left-color
11. border-left-style
12. border-left-width

You write them out like this:

border-right-color: yellow;

border-right-style: double;

border-right-width: medium;

You can mix up each side, making it something different or you can make all sides of the border the same. 

 

Stay tuned for the next CSS and XHTML post! :)