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:
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 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:
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
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.
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.