Adding Borders and Drop Shadows - Beginning CSS3 - page 181

The width properties accept a length or one of the keywords thin , medium , or thick . The actual values of the
keywords are not fixed, but they are consistent throughout a page. Negative values or percentages are not valid.
Because each element has four sides, creating a border with these individual properties involves setting at
least four of them to specify the style for each side. And you need all 12 to specify a width and a color different
from the text. Thankfully, shorthand properties simplify the creation of multiple borders, but setting a single
border can be useful. For example, you can add a border to the bottom of <h1> headings like this:
h1 {
color: #933;
padding-bottom: 3px;
border-bottom-style: solid;
border-bottom-width: 10px;
}

This adds a 10px solid border under a heading. It's usually a good idea to add a small amount of padding
to the bottom of the text to add a little space for descenders that go below the baseline. There's no need to add
border-bottom-color unless you want to use a different color from the text.
Another use for bottom borders is to add a double underline to text by creating a class like this:
.important {
border-bottom-style: double;
border-bottom-width: 3px;
}

Just wrap the text in a <span> and apply the class to it to create the double underline. Again, there's no need
to specify a color because the browser uses the same color as the text.

■ The preferred way to create double underlines is with text-decoration-style , as described in
Chapter 4. However, until this property is more widely supported, using a bottom border is the only cross-browser
solution.

Note

You can also use a single left border to highlight text. For example, the following style rule creates a teal
rectangle alongside an <h2> heading:
h2 {
border-left-color: teal;
border-left-style: solid;
border-left-width: 20px;
padding-left: 10px;
margin-left: 30px;
}