Opening the Box Model - Learn to Code HTML and CSS: Develop and Style Websites - page 59

Borders
Borders fall between the padding and margin, providing an outline around an element. The
border property requires three values: width , style , and color . Shorthand values
for the border property are stated in that order— width , style , color . In longhand,
these three values can be broken up into the border-width , border-style , and
border-color properties. These longhand properties are useful for changing, or over-
writing, a single border value.
The width and color of borders can be defined using common CSS units of length and
color, as discussed in Lesson 3 .
Borders can have different appearances. The most common style values are solid ,
double , dashed , dotted , and none , but there are several others to choose from.
Here is the code for a 6-pixel-wide, solid, gray border that wraps around all four sides of a
<div> :
Click here to view code image
1. div {
2. border: 6px solid #949599;
3. }
Figure 4.4 Different border sizes and styles
Individual Border Sides
As with the margin and padding properties, borders can be placed on one side of an
element at a time if we'd like. Doing so requires new properties: border-top , border-
right , border-bottom , and border-left . The values for these properties are the
same as those of the border property alone: width , style , and color . If we want, we
can make a border appear only on the bottom of an element:
Click here to view code image
1. div {
2. border-bottom: 6px solid #949599;
3. }