We've already discussed borders as a component of the CSS box model, but in this lecure we're going to talk about some of the specific border properties available to us in CSS.
When defining a border, we need to specify three main aspect of the border: the colour of the border, the style or type or border, and the thickness of that border.
border-color property allows us to specify the first of these components. By default, the border takes on the same colour as the
color property of the element. This is because setting the
color property changes the meaning of a keyword called
currentcolor is the default value for the border colour.
border-color property is actually a shorthand property, which lets us define several properties at once. Those properties are
We can use these properties to specify a different border colour for the different edges of the element's box.
We can also use the
border-color property to set several colours at once.
If we provide a single colour for the
border-colorproperty, every border edge is set to the same colour.
If we provide two colours, the first colour is used for the top and bottom border edges, while the second colour is used for the left and right edges.
If we provide three colours, the first colour is used for the top edge, the second colour is used for the left and right edges, and the third colour is used for the bottom edge.
If we provide four colours, the first colour applied to the top edge, and the remaining colours are applied in a clockwise direction.
border-style property allows us to apply a pattern to the border.
Most borders use the value
solid, but it's possible to use dashed and dotted borders. While very common on the early Internet, these alternative properties have fallen heavily out of fashion.
If you're interested, you can see some examples on the MDN web docs (opens new window).
Just like with
border-style is a shorthand property for all the different edge style properties. We can also use multiple styles, just like with
border-color, and this works in the same way.
Using a value of
none for any of a border edge will cause it to become invisible. This is he default value for every border edge.
We can specify the thickness of the border using
Once again, this is a shorthand property and we can specify a different border width for every edge of the element.
By default, if a border edge has a style other than
none, the border thickness will be
medium. This isn't a precise value, but you'll often find the border defaulting to
You can change these width values using any sizing units you like, but percentage values are not valid for borders.
Generally we use pixels for border thicknesses, because we want them to be very narrow, so using relative sizing elements like
em don't have a meaningful effect.
We can specify a value for the
border-width in one go using the
border, the order of the values doesn't matter, and we can specify one, two, or three values. The browser is able to determine what these values refer to, because the different component properties expect very different types of values.
The default property value will apply for any values we don't provide.
# Border radius
These days its extremely common to see rounded corners on boxes and buttons when browsing the Web. This is an effect we can achieve by using the
Interestingly, you can use the
border-radius property, even if you don't have a visible border. This means we can create rounded corners for an element with only a background, for example.
Just like with the other border properties we've looked at so far,
border-radius is a shorthand property for four other properties:
border-bottom-left-radius. Each of these is quite a mouthful, and thankfully we rarely need to use them.
border-radius lets us set values for several properties at once, the syntax can get extremely complicated, because each of these properties can be given multiple values. You can look at the MDN page (opens new window) for more information.
More often than not, you'll be setting a uniform border radius, which will be applied to every corner of the box. In these cases we can provide a single value to
border-radius, which will be applied to all of the component properties.
# Percentages vs absolute units
Depending on the unit type we use to define the
border-radius value, the effect of the property may be different.
This is because values defined using a percentage are based on the height and width of the element, and these measurements can be uneven. As such we can end up with the border radius being elliptical.
When using an absolute value, such as
5px, the border radius is always circular.
The MDN page (opens new window) for the
border-radius property features a number of examples where you can see this difference more clearly.
It's possible to achieve the same elliptical effect using absolute units by providing a pair of values for a given corner. Again, you can find details of the syntax on the MDN page if you're interested in experimenting with this feature.