CSS Tutorial - Border Control

This tutorial will teach you how to control those borders - a very useful web design ability - you can set their width, height, color and style, all independent of each other - here’s how!

Before we start, you MUST set the color, width and style for your CSS styles to be applied, I will go through them one-by-one, then show a shortcut to set them all at the same time.

Border Style

This is the most important one, because without it you don’t get a border! The possible styles are:

• Solid
• Dotted
• Dashed
• Double
• Groove
• Ridge
• Inset
• Outset

Now as you can see, these are pretty self descriptive, and the most used ones are solid, dotted and dashed… as shown below:

table {
border-style : dashed ;
}

Border Color

To change the color of a border you use the border-color property, as shown below:

table {
border-color : #0000BB ;
}

And you just need to alter the hexadecimal color code to change the background color.

Border Width

This property allows you to set (unsurprisingly) the width of the border, as shown below:

table {
border-width : 3px ;
}

Now, the shortcut!

Whilst you CAN set the properties individually, as shown…
table {
border-color : #990022 ;
border-style : dashed ;
border-width : 2px ;
}

which gives…

foo

You can set them all in one statement, as shown below:
table {
border : 1px dashed #990022 ;
}
Isn’t that easier!

Changing borders one at a time

Another nice benefit of using CSS to control the appearance of your borders is that you can have each border set to a different style, color and width! Here’s how:
.classname {
border-right : 3px dashed #000000 ;
border-top : 2px inset #000000 ;
border-left : 3px dashed #000000 ;
border-bottom : 4px outset #000000 ;
}

Which gives this:

CSS Borders!

Conclusion

You can now take advantage of being in complete control over the appearance of any borders on your web design, and can change the color, width and style of them, all individually!