Borders
A border is simply a line drawn around the content area of
an element and its (optional) padding. The three aspects of a border that
can be specified are its style, width (thickness), and color. As for
margin
, each of these qualities may be
specified for an individual side at a time or for several sides at once
using shorthand properties.
There are only a few things to know about border style behavior:
Borders are drawn on top of an element’s background, so the background color or image will show through the gaps in the intermittent border styles.
Borders applied to non-replaced inline elements (text elements) have no effect on the line height for that line. In other words, they are not included in the inline box for the element.
Borders applied to replaced elements, however, do affect line height, just as margins do.
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.