Adding Presentational Styles - CSS3 Foundations - page 70

Now, if you're wondering how you style the border of just one side of an element, you can do that using border-
left-width , border-top-style, and so on. This means that border-color , border-style , and
border-width are shorthand properties too; they apply styles to all four borders of an element in one go.
Try styling just one side of an element using a shorthand property:
1. In styles.css, find the #footer rule set, and below its other declarations, add the following:
border-top: #999 dotted 4px;
2. Save styles.css.
Here, you style the top border of the footer element with a dark gray dotted border (see Figure 5-3). You use a short-
hand property, which is the equivalent of:
border-top-color: #999;
border-top-style: dotted;
border-top-width: 4px;
Figure 5-3 The footer area with a dotted border applied only to the top.
I like things to be as simple as possible. It's not that I'm lazy…honest! If you like the simplicity of shorthand proper-
ties, you'll be pleased to know CSS has quite a few more like these, which are covered as you make your way
through CSS3 Foundations .
border-radius
Initial value: 0 | Inherited: No | Applies to: All, except internal table elements when border-collapse is col-
lapse | CSS3
Unprefixed browser support: IE 9+, Firefox 4+, Chrome 4+, Opera 10.5+, Safari 5+
Prefixed browser support: Firefox 1+, Chrome 0.2+, Safari 3.0+
border-radius enables you to give elements rounded corners. It is supported in all modern browsers but not In-
ternet Explorer 6, 7, and 8. Because it's a visual effect and nothing more, the fact that old versions of Internet Ex-
plorer don't render rounded corners isn't a problem; they just remain square.
1. In styles.css, find the #newsletter rule set, and below its other declarations, add the following:
border-radius: 8px;
2. Save styles.css.