Borders

Border Style

Border Size

Border Color

Border color (color always spelled the American way) can be set using the colors name, or its Hex code.

Browsers recognize an increasing number of color names, such as deeppink, purple, orange and red. You can find a full list of widely recognized color names [ on the w3schools website ]

Hex codes are a fully supported version of color names. Every shade of every color imaginable has a hex code. It's a 6 character code started with a # sign, for instance #ffffff is the hex code for white, and #000000 is black. You can find a pretty long list of hex codes on [ Webmonkey ].

Da Actual Code

You can apply borders to tables, div boxes, images, or even the entire page, and your border code can either go in a separate style sheet, or inside the tag of the item you want to change. If you want your border styles in a separate style sheet, but only want to affect one or two items on your page, you could even give them a class. Here's some examples.


To put a 2px red border around every image on the page:

This time the border just affects the image whos tag it's in:

This time we're going to give the image a class, and then use that classname to refer to it in the stylesheet. The classname can be anything you like. Notice that in the style sheet the classname is preceded by a dot. Classes always start with dots in CSS, to differentiate them from tags (like img in the example above).

Borders That Don't Go All The Way Around

Sometimes you might want to apply a border to only one or two sides of something like these:

The code to put a border on just one side of something, is as you might expect- you just substitute "border" for "border-left", "border-top", "border-right" or "border-bottom". So if in the first example above, we wanted to apply only a left border to every image on our page, it would become:

You could even do an image with one type of border on one side, and another on the other 3, (Nb, If you do this, be careful to put "border" styles before any "border-left" / "border-top" etc styles in your style sheet, because border styles override each other with the last taking precedence. If your "border" was after your "border-left" it would override the left hand borders style too, making all 4 sides match.