.border-test {

width: 200px;

height: 100px;

border-style: dotted;

border-width: 2px;

}

As you probably expected, widths can be set with length values, such as px, pt, em, etc, but it also accepts three pre-defined values: thin, medium and thick. The browser will handle the rendering of these three values, so I’ll leave it to a combination of your curiosity and the borders.html file for you to find out how the browser handles the pre-defined values.

Border-color

Border-color is a nice and flexible property, which allows us to set the colour of the border. We can use the same ways of setting colour as usual, be it with name values (red, orange, blue), hex value (#ffffff) or RGB (rgb(255,255,255)). That’s about all there is to say about border-color – it’s a nice and easy one to use and always affords us great flexibility.

Borders – differing sides

In the above sections we have seen plenty of examples where we have applied a border to an element with great success. Well, you can also apply differing border styles, weights and colours to each side of the element. There are plenty of different ways to do it. Let’s explore.

All of the border properties can be applied to any single side of the border with great ease. Take the example of the border-style property: as we have seen already, we can apply a border style to the whole element like so: