CSS for Beginners – Borders

In CSS, borders are used to define an area of the page or HTML element. In their most simple form, borders will be a solid, single-colour line around the element. But with a bit of CSS knowledge, you can style borders in many different ways, making them a very useful design element.

414 2 minutes read

CSS Borders

As mentioned, borders are most often used to define an area or element of the HTML page. They can be styled in many different ways, given any colour, made any size, and even be made to appear on only one or two edges of the element. A simple border style might look like:

This would result in a solid green border all the way around the element, that is 1px wide. The only essential border property is border-style. If the border-style property is not set, the other border properties will have no effect.

You can also style borders using the shorthand version of the declaration, like this:

Border Styles

There are several different border styles available in CSS. These are:

solid – A solid border
dotted – A border of dots
dashed – A border of dashes
double – A double-line border
groove – A 3D grooved border
ridge – A 3D ridged border
inset – A 3D inset border
outset – A 3D outset border
none – No border
hidden – A hidden border

Any of these styles can replace ‘solid’ in the example above to return the desired effect.

Border Sides

Border styles can be assigned to each of the 4 edges (or sides) of an element independently: top, bottom, left, and right. For example:

This would result in any <p> tags with the “two” class having a border that was solid top and bottom, with dashed sides to the left and right. There is a shorthand way to write the same CSS style shown above:

When using the shorthand, if the border-style property has two values, the first is applied to top and bottom, and the second is applied to left and right. You could use 4 values to style top, right, bottom, left, in that order.

You can assign a border to one, two, three or all four sides of the element box. This can be useful for underlining a section heading or making a line of text stand out by having a border only on the left. for example:

The shorthand way to write this would look like:

Border Colours

Borders can be assigned any colour available in CSS, using colour names, HEX, RGB, etc., as discussed in a previous lesson. If you do not set the border-color property, it will inherit its colour from the element it is applied to.

Just as with border sides, border colours can be assigned to each edge independently. You can write this in two ways:

Or the shorthand version of the border-color property:

Tip: When writing properties in shorthand like this, the value order is almost always: top, right, bottom, left. So in this example, Red applies to top, Blue to right, and so on.

Rounded Borders

If you want the corners of your bordered element to be rounded, CSS has you covered. The border-radius property allows you to round off the border in increments. For example:

This results is a fairly simple solid, blue, 2px wide border, with corners that each have a radius of 10px. But the border-radius property also allows you to style each corner differently, giving you the ability to create borders with a non-uniform shape. For example: