
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 borderdotted
– A border of dotsdashed
– A border of dashesdouble
– A double-line bordergroove
– A 3D grooved borderridge
– A 3D ridged borderinset
– A 3D inset borderoutset
– A 3D outset bordernone
– No borderhidden
– 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