Subtitles of the Movie

We now arrive at the Border property. Borders are a simple concept with a million possibilities. In most cases it's sound design to at least consider the idea of adding borders around your page elements. I'm always reminding my web design students to experiment with different types of border designs around their paragraphs, text content, images, divisions and other page elements. Just about any HTML element can have a border placed around it. Borders can be placed on all sides or just the sides that you specify. The border property is particularly flexible as each border can be a specific width, color, or style. Notice that in this example, if I look at the code you can see that for these divisions I've applied a border style up at the top of the rule definition, a border color next and then also a border width. So I'm varying both the style, color and the width of each of the sides of this division. Numerous values and settings are available so let's review these in more detail in this movie. The default values for a border are to have a medium thickness with a color that's inherited by the parent element. By applying further values you can then redefine these default states, such as border-style, border-width; notice that I have a border-width value for top, right, bottom and left as well as color, and the border-style top, right, bottom and left. Controlling borders is relatively easy but it's worth looking at each of these properties in more detail. The border-style property is used to give any element a border. The browser must first understand the style of the border to be drawn before moving on to further border declarations so it's better to declare the style keyword first before the border-color as I've done here and also before the border-width as I've also demonstrated here for this division. Keywords for border-style are: none, dotted, dashed, solid, double, groove, ridge, inset, and outset. You can see these keywords here in this list, probably better to experiment with each of these style keywords and see the results in the browser. For example here I have a border-top style as double, but let's change that to dashed taking a term from my border style keywords list here, making sure that I spell this correctly and there's the dashed border style. Let's go back up here and change the dashed on that apDiv1 top style to ridge making sure that I spell it correctly. There's the ridge style. Let's also go in and change the width of that border so we can see that ridge style better and border-top width is thick there. That's probably the best place to start. Let's go ahead and apply this a pixel value, 25 pixels and we can see that maybe a little bit better. Probably the color is not helping us there. Let's also try another term here, let's try replacing the ridge with another keyword, inset. So go through and adjust these properties to really see their effect. Let's change the color of that border-top, making sure I have apDiv1 border-top color, let's change that to actually a named color, let's change it to red. We can see that inset a little bit better there. Let's do a lighter color on that, move up here and change the border-top color from red to pink, see that a little bit better. So, go ahead and set up a division and try each of these border-style keywords to see the effect in the browser. Also go ahead and make changes to the border colors and the border widths experimenting with the various values. Now some HTML elements have their own default borders. For example, the default border size for the fieldset element, as you remember these are used to define a series of related form inputs, is medium thickness. Also, watch out for images used as hyperlinks where the image will have a border matching the declared link text color for the containing element. Oftentimes these colors will be blue giving you an ugly blue border around your images. Many other elements do not have default border styles so you must define your border styles from scratch in the head section of your HTML. Now border widths allow you to define the width of the element's edges one by one, or all at once. Here in this example, apDiv2, I have a thick border for the top, a medium border for the right and thin borders for left an bottom. You can see that in this declaration right here: thick, medium, thin and thin, right here for my border declarations in terms of the thickness. Remember that for a border with value to be applied, a border style must first be declared. As you've seen several keyword values are available here: thin, medium and thick as well as relative lengths. I recommend caution when using the keywords thin, medium and thick. Different browsers render these borders in various ways. Exactly how many pixels each browser will use to apply to that border thickness will vary from browser to browser and remember that if you do define a border style but not a border width the default value will be medium. That then will conclude my review of some of the more important CSS building blocks. These are elements and properties that you'll be using throughout much of your CSS work including divisions, or div tags, the width and height properties and the properties of margins, padding and borders.