Borders can be applied to most HTML elements within the body.
To make a border around an element, all you need is border-style
. The values can be solid
, dotted
, dashed
, double
, groove
, ridge
, inset
and outset
.
border-width
sets the width of the border, which is usually in pixels. There are also properties for border-top-width
, border-right-width
, border-bottom-width
and border-left-width
.
Finally, border-color
sets the colour.
Add the following code to the CSS file:
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
This will make a red dashed border around all HTML secondary headers (the h2
element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).