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.

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:

This results in the top-left and bottom-right corners being rounded, and the bottom-left and top-right corners being square.

Previously –¬†Learn how to apply colours and backgrounds to HTML elements

Learn about CSS syntax and how CSS is written

Learn how to insert CSS styles into your HTML documents

Russ Ware

Russ has been testing, reviewing and writing guides for tech since the heady days of Windows 95 and the Sega Saturn. A self-confessed (and proud) geek about all things tech, if it has LED's, a screen, beeps or has source code, Russ will want to master it (and very likely take it apart to see how it works...)

Related Articles

Back to top button