You've seen how to place horizontal lines near text. Now you shall see how to put lines around any edge of any element using the family of border properties. This family includes border-style, border-width, and border-color. By default, border-style is none, so no borders appear. Other possible values include solid, dashed, dotted, ridge, double, inset, outset, and groove. Your browser may provide defaults for the other properties, but you should explicitly set them to ensure a uniform appearance across browsers, as is done in this example:
Try changing these properties to different values. Some of the styles feel like they're straight out of the 1990s, because they are.
Each edge of a border can be styled independently by expanding the property names to include the edge:
This can lead to very verbose CSS that is full of redundant expression. An alternative is to use multiple values with the property that applies to all edges. Reason out what happens when you list two styles:
Try adding add a second width. When you list two values, the first value is applied to the top and bottom borders, and the second value to the left and right.
Reason out what happens when you list three styles:
The first value is applied to the top border, the second to the right, and the third to the bottom. There's no value for the left, so the browser just uses the right border's value in an appeal to symmetry.
Reason out what happens when you list four styles:
When you see a list of multiple values for a property related to a box, you may find it helpful to visualize a clock. The first element applies to the top. As you walk through the list, the values are applied to the box in a clockwise progression. The mechanic of multi-valued properties is going to come up a lot in the near future.
Try adding four widths and four colors, predicting what changes will be made and where.
This family of properties can be set all at once using the border shorthand rule:
Sometimes you will find it easiest to apply a style generally, but then selectively override the general rule. In this example, all borders are styled and then the bottom border is turned off:
Try swapping the order of these two rules. What can you say about the order of style rules?
Another useful property is border-radius, which can round the corners of an element and add a bit of softness to a world of rectangles:
The radius can be expressed as a percentage of the element's dimensions. Try changing it to 50% to achieve a common portrait effect.
The border-radius property will produce rounded corners even if no border is present. Try removing the border.