Lesson 2.3: Dimensions – Borders

In the last lesson we discussed the properties for height and width, margins and padding. In this lesson we are going to cover the last of our “dimensions” properties: borders.

Border Basics

Borders in CSS, as I’m sure you could guess, are borders around elements. You can break a border around any element into four parts: top, bottom, left, and right; just like padding and margins. Each border also has three components that make up the border: width, style, and color.

The Components of a Border

As I just mentioned, the three components of a border are width, style, and color.

The width of a border is how thick the line that makes up the border is. Usually you want to define this in pixels, however you can specify it in any of the multitudes of unit measurements available: percent, ems, and so on.

The color of a border is… the color of the border. We will cover colors in another lesson soon, but for now just know that colors can be defined with either hexadecimal values (three pairs of two hexadecimal-digits, each representing red, green, and blue respectively), or with one of the multitudes of predefined color constants, such as “black”, “white”, “red”. We’ll go into much greater detail of color in a future lesson.

The style of a border defines how a border looks. There are a large number of predefined border styles. Below is a list which has the various border styles, with an example of that style around the text:

• solid
• dashed
• dotted
• double
• groove
• inset
• none
• outset
• ridge

If you notice the border style “none” doesn’t have a border. Using “none” for the border style let’s you remove a border from an element. You can also set the width to be 0, which will also remove the border.

So, you have a large multitude of border styles in which you can choose from.

Defining the Borders

The basic property to define in order to get a border is the “border” property. This property can take three values, the color, the style, and the width. Since each of these values differs from each other, the actual order you place these in is irrelevant. This fact aside, the typical order is width, style, then color. Below is an example.

p {
    border: 1px solid black;
}

I have a 1-pixel solid black border.

If you omit any value, it simply uses the default or inherited values for the missing ones.

Similar to padding and margin, you can also break this up into each of the four different borders: border-top, border-bottom, border-right, and border-left. Each of these four takes the same three values that border takes.

However, unlike padding and margin, there isn’t a shortcut version to specify different borders within a single border property. If you want different borders, you must break it up. However, say you want three of the borders to have the same border, and only one be something different, you can do it like this:

p {
    border: 2px solid black;
    border-right: 2px dotted green;
}

I have a 2-pixel solid black border around most of me, with a 2-pixel dotted green border on the right.

If you define a border, it is applied to all four sides. Then, when you define a specific side, only that side is changed, while the others remain the same.

You can also break down the border even further, into border-style, border-width, and border-color. Each of these take just a single value, a style value, width value, or color value respectively. You can even break these three component properties into top, left, bottom, right as well, so you end up with properties like border-bottom-style, border-top-color, etc.

Smoothed or Cornered?

An interesting, and sometimes troubling, event can occur when you start defining different borders for one object.

When you have two different borders that share a common point, these borders are fit together at a corner, so each one gets equal priority. Here is an example:

p {
 border-top: 5px solid blue;
 border-left: 5px solid red;
}

See the corner?

Keep this in mind when you start defining different borders. You can however get a flat border as well, if don’t define any joining corners. Below is an example where on one we just define a left border, so we get a nice straight line. On the other, we set a left border, as well as a top and bottom that is white (the same color as the background), so they are essentially invisible. Check out the difference in the two:

#p1 {
 border-left: 10px solid green;
}

#p2 {
 border-left: 10px solid green;
 border-top: 10px solid white;
 border-bottom: 10px solid white;
}

I just have a green left border.

I have a green left border, and a white top and bottom border you can’t see.

Use this knowledge to your advantage and don’t let it create unexpected problems.

In this lesson we learned all about borders. In the next lesson, the final one in the Dimensions series, will finally teach you how to fully calculate the true width and height of elements so you can make proper use of padding, margin, and borders without having to pull your hair out trying to get things to line up just how you want: Lesson 2.4 – Dimensions: Adding It All Up.