Exercise

Make a copy of your lists.html page, name it ‘borders.html’ and strip out all content inside the.content div. Inside here create a new div with a class of ‘border-test’ then in your CSS file add the following style:

.border-test {

width: 200px;

height: 100px;

border-style: dotted;

}

Save both files and open borders.html in Google Chrome. Notice our lovely dotted border? Now substitute the ‘dotted’ value out for some of the other styles and get a feel for how each one renders. There are some very useful effects that you might have seen in use across the web before. Once you have finished this exercise, keep the new file. We will revisit it later on in this chapter.

Border-width

Now that you’ve got the excitement of playing around with border styles out of your system, it’s time to move swiftly on to the border-width property. This one is another gem from the self-explanatory nature of CSS, but for clarity let’s address the property with appropriate respect as it does have some useful and interesting values.

Example: