Borders

By default, most HTML elements doesn't have a border, but CSS gives you plenty of options to define one, with a range of border related properties. In fact, the border can be adjusted using so many properties that it sometimes gets a bit confusing. However, at its most basic level, you will usually want to control the border color, width and style, so let's look at an example of just that:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 2px;
	border-style: solid;
}
</style>

<div class="box">
	Hello, world!
</div>

This is pretty much as basic as it gets - by using the border-style, border-color and border-width properties, we can easily give an element the border we want. Now let's talk about these three properties.

Border color

Just a plain old color property, where you can define the color for the border in several different ways, as it is with all color related properties in CSS. Look elsewhere in this tutorial for a complete walkthrough of all the options you have when defining a color in CSS.

Border width

Works much like margins and paddings - can be either an absolute value, like in this example, a relative value, or one of the pre-defined border width values: Thin, medium or thick. If you use the pre-defined values, it's up to the browser to interpret them, which basically gives you less control of how your work will look across all the different devices and browsers.

Border style

For the style of the border, you have a range of options. The most commonly used is probably the solid border, but there are many more to choose from:hidden, dotted, dashed, solid, double, groove, ridge, inset and outset. Wanna know how they all look? Try out this example:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-color: CornflowerBlue;
	border-width: 4px;
	margin: 10px;
	float: left;
}
</style>

<div class="box" style="border-style: dashed;">Dashed</div>
<div class="box" style="border-style: dotted;">Dotted</div>
<div class="box" style="border-style: double;">Double</div>
<div class="box" style="border-style: groove;">Groove</div>
<div class="box" style="border-style: inset;">Inset</div>
<div class="box" style="border-style: outset;">Outset</div>
<div class="box" style="border-style: ridge;">Ridge</div>
<div class="box" style="border-style: solid;">Solid</div>

Shorthands

We talked about shorthand properties earlier - properties which allows you to define values for multiple properties at the same time. In the first example, we actually used shorthand properties to define the same color, width and style for borders of all four sides of an element. For instance, border-style actually maps to border-top-style, border-right-style, border-bottom-style and border-left-style, and the same goes for border-width and border-color.

This also means that border-style, border-color and border-width can all take from one to four values, allowing you to use different styles, colors and widths for all four sides of the element. Here's an example:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border-style: solid dashed ridge dotted;
	border-color: CornflowerBlue Chartreuse CadetBlue Chocolate;
	border-width: 1px 2px 3px 4px;
}
</style>

<div class="box">
	Hello, world!
</div>

Now the final result is a pretty odd looking box, but hopefully you can see how it works. Just like with margins, you can specify one or several values, which will be applied from the top and clockwise around the element (top, right, bottom, left).

Without these shorthands, you would have to use 12 properties to achieve the same result, but it can get even shorter: Using the border property, you can shorten it even more. Here is our very first example, re-written to use the border property:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 2px solid CornflowerBlue;
}
</style>

<div class="box">
	Hello, world!
</div>

We just saved a couple of properties more! When using the border property, the correct order is width, style and color and while the browser may be able to understand it even if you don't get the order right, it's recommended to always use this specific order when using the border property. Notice that you ARE allowed to skip one or two values - in that case, the browser will try to understand which of them you skipped and assign the default values for the missing ones.

Border radius

As an addition to CSS 3, the ability to define border radius was added, effectively giving developers the possibility to make rounded corners on their elements. For new developers, this might seem trivial, but before this was added, the desire for rounded corners generated hundreds of how-to articles!

Fortunately, that was in the past and thanks to the border-radius property, it's now as easy as pie to get rounded corners:

<style type="text/css">
.box {
	width: 100px;
	height: 100px;
	border: 3px solid CornflowerBlue;
	border-radius: 5px;
}
</style>

<div class="box">
	Hello, world!
</div>

The only disadvantage is the lack of support for this in Internet Explorer 8 and versions below it, but they will simply fall back to regular corners. As you may have guessed by now, border-radius is a shorthand property, short for border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. You can set these individually, or use one or several values for the border-radius property to have different values for the four corners of an element.

The border-radius property takes absolute and relative values, just like most other CSS length units, and in the next example, I'll use that to create corners so rounded that the usual squared box actually becomes a circle:

<style type="text/css">
.circle {
	width: 100px;
	height: 100px;
	background-color: CornflowerBlue;
	border-radius: 50%;
}
</style>

<div class="circle"></div>

Pretty cool, right?

Summary

Borders are a great tool when designing your webpages and as you can see from the above examples, they are both flexible and easy to use. The amount of shorthand properties can make things a bit confusing, but after a while, you will get the hang of it.