HTML and CSS Reference
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:
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:
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
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: