Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Chapter 7: The Box ModelFigure 7-28How It WorksIn Example 7-2, you recapped what was possible with the border properties. You can set an element’sborder style by four different properties, one for each side, border-top-style, border-right-style,border-bottom-style, and border-left-style, or via a shorthand property that lets you set all foursides in the same way as the margin shorthand property, the border-style property. The process is thesame for border-width; you can use the four separate border width properties, border-top-width,border-right-width, border-bottom-width, and border-left-width, or the shorthand borderwidthproperty. Then there are also the similar border-color properties that allow you to set the bordercolor of each side via individual border color properties, border-top-color, border-right-color,border-bottom-color, and border-left-color, or the border-color shorthand property.You learned that when there is no border style specified, the default style is none; when there is nowidth specified; the default width is medium, and when there is no border color specified, the defaultborder color is the value of the color property (in other words, the same as the text color).You also learned that there are four shorthand properties that allow you to combine border-width,border-style, and border-color into single shorthand properties. These exist for all four sides,border-top, border-right, border-bottom, and border-left. The last border shorthand propertylets you set all four sides of the box at once, and that’s the border shorthand property.In the next section you examine box padding.241