Join Christopher Deutsch for an in-depth discussion in this video border properties, part of CSS2 Essential Training (2003).
- View Offline
In this movie I'm going to talk about all the different ways you can control borders using CSS. Now the first thing you have precise control over is the width of the border. First, here's an example of some of the border-width keywords: thin, medium, and thick. You can see that, in each case, when the value for the border property is set using one of these keywords, that the border gets progressively thicker. Additionally, you can also specify an exact width of the border.
Here's an example of a border with exactly a 10 pixel width and here's a border with a width of two ems. Now, in case you don't know, an em is a measure of the height of your font. So, in this case, it's two times the height of the font I'm using. So here's what the syntax looks like for the border-width property. As we just saw you can specify thin, medium or thick, or you can specify a specific length.
Now, aside from specifying an equally thick border on all sides of your element by just using the border-width property, you can actually specify a different width of border on each side of the element: the top, right, bottom, or left by just using the border-top- width property; border-right-width property; et cetera. Now, one thing that's important to know when you're specifying borders when using these keywords is that the actual interpretation of thin, medium, or thick is up to the browser.
So your pages might look a little bit different in different browsers if you rely on these values. So, now I'm going to go back into my browser here and open up in the Chapter 05-Layout folder the 'index.html' file. Now, here you can see the images on the right side of the page have the default border for this version of Mozilla which is just a couple of pixels wide. So, let's go ahead and also open up the 'index.html' file in the text editor in the Chapter 05-Layout folder and scroll down here a bit, and you can see that there's a table that contains cells: one for each of the images.
Now, if I look at this line here, I can actually see the image tag and then in scrolling over a bit more I can see exactly the width and height is specified and where the image is actually located. Now I've already gone ahead and added a class to each of these images called "thumb" because they're thumbnail images for all the images on the main page here. So, if I go back into my browser and open the 'main.css' file, I can go down and add a class selector for all images that have the class thumb so it'll read 'img.thumb' and then put in some curly braces, and let's give the border a width of 5 pixels.
So I'll just type 'border-width: 5px', for pixels, and a semi-colon and save it, and so now, if I return to my browser and reload, you can see that the width of the border of all of these thumbnail images has become 5 pixels. And also notice that the width of the border around these images which aren't in the thumbnail class hasn't changed. So let's say we wanted to make sure that no images on the page had a border unless we have specifically specified it.
In other words, let's look at how in CSS we can get rid of all these borders for the icons appearing on the left side of the page. Well, if I return to my 'main.css' file, I can do that by just adding a selector for all images. So I'll just type 'img' for the image tag and then border-width: 0. So, if I save that file and then return to the wallpaper site and reload, you can see that now the border has disappeared from each of those images.
Now, it's also possible to control the exact border color of all these borders as well. Here's some examples: Here I've set the border- color property to red, here to green and here to blue. Incidentally, I've used three of the different ways of setting colors in CSS to do this. Now the syntax for the border-color property is almost exactly the same as the regular color property in CSS, but just for the sake of completeness we'll go over it here briefly.
Here you can see examples where in one case you just use the color name keyword - here red, or a hex value, just like you would in HTML, or the RGB functional notation. So, if I return to the wallpaper site, I can see that the color of the borders is a dark gray. It looks like about #666 in HTML and, if I return to my editor and look at the color, you can see that the color of all elements has been simply inherited by the image.
So if I look up at the top of the page at the color property as specified on the body, I can see that the default color for the border has been set to 666, just because that the default color for everything. But let's say that I wanted to make the border a different color. Now down at the bottom of this page in the img.thumb selector for the thumbnail pictures I could type in 'border-color: #333;' which would be, I think, a little bit of a lighter gray.
Now, if I save that and then return to the browser and reload - oh, I was wrong, it's a darker gray - but you can see here that the color has changed just the same. Let's try a bit of a different color though. Let's see what happens if we put in #666. Just sounds better. Okay. That looks good. So, I'll leave it at #666.
There's one other important aspect of control you have in CSS over the way borders look and that's the border-style. Here you can see that the borders are just solid lines, but you can actually change that in CSS. Here's some examples: in the first two examples I have no border. Here you can see the border's dotted, here dashed, solid, double, et cetera. Now, one important thing to note is that, if you set the border-style to none, not only will you not be able to see the border on an element, but it also won't take up any space.
What I mean is this: If you use border-style: hidden, but still have a border of say, width 5 pixels, that 5 pixels will still take up space on the page even though you won't actually be able to see the borders themselves. So, taking a look at the border-style syntax, you can see here a list of all the various values you can use and, again, none is actually just the same as using a border-width of zero.
Now, two other things that are important to know when you are using border- styles in CSS are that both the dotted and dashed styles are not supported in IE5 for Windows, so if you are using them in your pages, be aware that people using those browsers won't be able to see them. So I'm going to return back to the site. You can see here that we just have a solid border. So let's change that and play around with it. Back in my browser on this thumbnail pictures I'm just going to add a border-style property. And let's try double and see how that looks.
So when I come back to the site after saving the page and click reload, I can see that now there's a double border of the same color and width that I specified previously around each of these images. Or, I can try an outset border. If I save that and reload the page, you can see that now, you have what's called an outset border which is shaded on the right and bottom and then transparent on the top and left. You can also try a dotted border here, just to see what it looks like. And now you can see that each of the thumbnail images is surrounded by a dotted border, but I think for this page that the solid border looks the best.
So, I'm just going to change this to solid and save it, and when I reload, I can see that now everything is back to the way it was before. So, so far you've seen how to set the border-width, color, and style, and it's actually possible to specify all of these attributes at once instead of individually. And you can do that by using what's called the border-shorthand property. So you can actually specify a border's width, style and color all at once by using the border-shorthand property and that just looks like this: Border: and then, in this particular order, the width, style, and color, of the border.
So, if I return to the site here and click on one of these pages I can see that there is a larger image on each one of the product pages. If I go to this one, for example, here's the same image. So let's go ahead and open up one of these and play around with it for a little bit. So back in my editor I'm going to go to the File, Open, and then in the exercise files go to Chapter 05-Layout and then in the 'titles' subfolder, I'm going to go and just open the 'acrobat' file.
So, let's take a little bit of a look at this HTML to get familiar with it. You can see at the top, as on previous pages, we have an h1 element and that just specifies the title and then down here the layout, again, is done by using a table which is very common, as you probably know, for web pages. Now, I've already gone ahead and given all of these larger images a specific class that we can use, and that's the "big" class which you can see here and this is the "Acrobat 5 cover art" image in this table right here, as you can see.
So, because we already have a "big" class, I can return to the 'main.css' file and type 'image.big' and now using the border-shorthand property, I can set a 5 pixel border that's solid and has a color of #666. Saving that, if I go back into my browser and then go into one of these pages, you can see that now the image has a 5 pixel solid border with this medium gray tone.
At this point I encourage you to play around a bit with the borders on the site and try out all the different styles and colors and just play around with them a bit and see how they work.