HTML and CSS Reference
browser in which you've decided to create your web page (I use -webkit- for Google Chrome), and in Chapter
15, you use a tool that adds the other vendor prefixes to your CSS automatically.
When a property should be used with vendor prefixes, I'll let you know. However, as the web is constantly evolving,
if you'd like to be certain of whether a property still requires a vendor prefix or not, I recommend visiting a website
called When can I use... ( www.caniuse.com ). Not only will When can I use... tell you which properties are sup-
ported in which browsers, it'll also show whether you need to use vendor prefixes for that property.
At the time of writing, browser vendors are making a push toward removing vendor prefixes from the more estab-
lished CSS3 properties and as time goes on, fewer vendor prefixes will be required, until they eventually become
Using vendor-prefixed properties when they are no longer necessary won't cause any problems and it is better
safe than sorry. A browser will simply skip over a vendor-prefixed property that it may no longer support and in-
stead use the official property. So, providing you place the official property below the vendor-prefixed ones, your
CSS will remain future proof.
Borders are graphical elements that are applied around the edge of an element.
Initial value: the value of color | Inherited: No | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
As you would expect, border-color specifies the color of a border and can be given a variety of values, such as
RGB, RGBA, HSL, HSLA, and color keywords.
1. In styles.css, find the #main rule set and add the following declaration:
2. Save styles.css.
This gives the border around the main content container <div id=”main” class=”group”> a gray border
color. However , for borders to work, you need to specify a border-style and border-width along with the
border-color property. Because the initial value of border-style is none , you cannot see the border yet.
In the CSS2.1 specification, the initial value for border-color is the same as that of the color property. So if a
border-color isn't specified and the color is red, then the border-color will be red too. In CSS3, the ini-
tial value is the keyword currentColor , which achieves exactly the same—the border-color will be the
same as the color . The introduction of this keyword is just to allow you to specifically show you want the
border-color to be the same as the color . If you were working in a team with multiple people working on the
same stylesheet for example, the following clearly shows you intend to have the border-color be the same as
the color , whereas without the border-color declaration, it may look like you forgot to add that style: