SpeciFISHity: CSS Specificity

Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity.

X-0-0: The number of ID selectors, represented by Sharks
0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish
0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob
*: The universal selector has no value

Download the specificity chart and read the rest of the SpeciFISHity article here

Creating counters with Generated Content

I have never used the counter or increment properties since they aren’t supported in IE7 or earlier, nor are the :before pseudo elements, or content property. Since IE8 does support all of these, soon we may be able to include these CSS properties, so I thought I would explain them.

The <ol> start attribute and <li> value element were deprecated in HTML 4.01 and not supported in XHTML strict. The value attribute set the number of a list item, enabling the following list items to increment from that value. While there is no (X)HTML replacement for these elements, CSS 2.1 provides methods for setting and incrementing counters on any element, not just <li>’s. This article focuses on the following CSS pseudo elements and properties:

  • content CSS property
  • :before pseudo-element
  • :after pseudo-element
  • counter-increment CSS property
  • counter-reset CSS property

The content property is used in conjunction with the :before or :after pseudo-elements. The value of the content property is added to the visual layout of your document, but is NOT added to the DOM. If you’re reading this tutorial, you should already know that! We’re discussing :before, :after and content here because without them, the counter is kind of useless: if you’re not going to display the content of a counter before (or perhaps after) an element, why include it?

Overview of content property

To make understanding this tutorial easier, we are going to use the concrete example of adding ” – <hrefValue>” after every link, which is helpful when using print CSS.

<ul id="showlinkafterlink">
  <li><a href="http://www.yahoo.com">Yahoo</a></li>
  <li><a href="http://www.google.com">Google</a></li>
  <li><a href="http://evotech.net/blog">CSS, JavaScript and XHTML explained</a></li>

Listing 1: Without any CSS, this is how the code above looks

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";

Listing 2: If you are using a standards compliant browser (i.e. NOT IE6 or IE7), the above should have the hrefs following the links.

A few things to note about the content rendered via the content property:

  • Generated content does not alter the document tree. The content is rendered only: it doesn’t appear in the DOM tree, altering the presentation only, not the document
  • To control the appearance of the generated content, you can use other CSS properties. All properties in the :after declaration impact the generated content.
  • In case you were wondering, you can only add one pseudo-element per side of your element. element:before:before does not work.
#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    color: #ff0000;	 font-style: italic;

Listing 3: Here we’ve defined the color and font-style for the generated content.

While the generated content is NOT added to the DOM, think of it as an added span that inherits everything from it’s parent. The content cannot contain any HTML, just ASCII, escaped and ISO characters. As mentioned, content is used with the :before and :after pseudo-elements to generate content in a document.

Values of the CSS content property

The CSS content property can take as its value none | normal | <string> | url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style]). Values have the following meanings:

  • content: none;

    none: The pseudo-element is not generated.

  • content: normal;

    normal: Computes to ‘none’ for the :before and :after pseudo-elements unless the default browser rendering includes content (i.e. <q>) which is handled differently based on the browser – Safari shows the default content, IE8 and FF do not.

  • content: "Estelle: ";content: "\00a3 "; /* includes '£' */

    string: Adds a string before or after the element (depending on which pseudo-element is used). Strings can either be written with double or single quotes. If your string includes a quotation mark, make sure you escape it with a slash-quote or slash-ISO value. If you are going to include any non-ASCII characters or entities, declare the charset in your CSS and XHTML, and/or use the ISO code for the character. Check out my blog post on including named entities in CSS and Javascript

  • content: url(myBullet.gif);

    url: The value is a URI that designates an external resource (such as an image). If the browser can’t display the resource, FF and IE8 omit it, as if it were not specified, but Safari indicates that the resource cannot be displayed with a missing image icon.

  • content: open-quote;

    open-quote and close-quote: These values are replaced by the appropriate string from the ‘quotes’ property. Opera handles this, but does not nest quotes correctly, Safari ignores this completely. IE8 and Firefox get it right.

  • content: open-quote;

    no-open-quote and no-close-quote: Introduces no content, but increments (decrements) the level of nesting for quotes. Safari ignores this completely. Opera, IE8 and Firefox get it right.

  • content: attr(title);

    attr(x): This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn’t have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

    For uber coolness, or geekiness as the case may be, you can add text dynamically without using javascript.

    a.tooltip {
      position: relative;
    a.tooltip:hover:after {
      content: attr(title);
      padding: 5px;
      border: 1px solid #f00;
      background-color: #dedede;
  • content: counter(subtitles, decimal);content: counter(headers) "." counter(subtitles) ": ";

    or counter(name, style): The counter takes two parameters: the name, which you can reference to increment or reset, and the style, which, if not declared, defaults to “decimal”. While you can name the counter almost anything except ‘none’, ‘inherit’ or ‘initial’, avoid key terms.

Browser support for the CSS content property and :before and :after pseudo elements

The CSS content property and possible values
IE6 IE7 IE7 in IE8 IE8 FF3 FF 3.5 Beta Saf 3.2 Saf 4 Beta Opera 9.64
content Since :before and :after is not supported in these browsers, testing is not possible, and moot. It is assumed that IE6 and IE7 does not support the content property, therefore supports none of these values works, except for issues below works, except for issues below works, except for issues below
none n
normal displays quotes on <q> Makes sense, but not the spec.
url() nothing nothing nothing missing image icon missing image icon missing image alt
Does not nest quotes correctly, but does include quotes.

counter-increment and counter-reset CSS properties

Counters don’t work on their own! if you just write p:before {content: counter(subtitles, decimal);} every paragraph will have a zero in front of it. To more easily understand this, let’s think of real world examples:

  • footnotes
  • creating numbering for outlines: counting chapters, sections and subsections, restarting the subsection counter for each new section, and resetting the section counter for each new chapter

Using the CSS counter syntax you can define as many counters as you like in your page, increment the counters and reset the counters. While the counter gets physically added to the presentation of the page (not the DOM) using the CSS counter value on the content property as a pseudo element using the :before or :after syntax, the increment happens on an actual element on the page.

<p> With this paragraph, I have included <cite class="footnote">citation to footnote</cite>.</p>

cite.footnote {counter-increment: citations;}

cite.footnote:after {content: counter(citations); vertical-align:text-top;}

In our example above, we would increment the counter on every <cite class="footnote">, then add the footnote numbers using the content property on the :after pseudo element. In order to use a counter, you should give it a name. In the above scenario, the name is “citations”. You can also specify the style. If the style is not declared, the style defaults to decimal. The values include all the list-style-type values, though only <ol> values make sense with a counter. Values include decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian and others.

You can include more than one counter in generated content. For example, in legalese, you often have sections within sections all numbered. This is doable with CSS counters.

<h1>First Header</h1>
<h2>another subsection</h2>
<h2>yet another subsection</h2>
<p>more text....</p>
<h1>Another Header</h1>
<h2>another subsection</h2>
<h2>yet another subsection</h2>
<p>more text....</p>

To add counters in front of every h1, with counters on the h2s that reset after each h1, the CSS would look like:

h1 {
	counter-increment: headers;
	counter-reset: subsections;
h1:before {
	content: counter(headers, upper-roman);
h2 {
h2:before {
	content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";

Now all <h2>s are preceded by their header number and subsection number.

A few things to note about the code: note that in the h2:before declaration we’ve included two counters: the header counter and the subsection counter. We declared the style in both calls, as style is NOT inherited. Also, we’ve included strings within our declaration. Note that there are quotes delimiting our strings, but not our counters, and there are no concatenation elements without our content value. To combine multiple counter ID’s in the same style attribute, string them together using space delimited counter ID values.

Incrementing of the counter was done through the counter-increment declaration. While the default value is to increment by 1, we can increment by other values. You can also reset counters. It makes sense to reset subsections after every header. To overwrite the default value of 1, and to reset after each <h1> the CSS could be:

h1 {
  counter-increment: headers 10;
  counter-reset: subsections 5;
h2 {
  counter-increment:subsections 2;

Named, HSL and RGB Colors

CSS3 adds names colors from SVG and well as colors defined by Hue, Saturation and Lighness. Below is a table that lists all named colors along with their hexidecimal, RGB and HSL values.

Also, check out the CSS3 Color Converter

Named Color Hex RGB HSL
aliceblue #F0F8FF rgb(240,248,255) hsl(208, 100%, 97%)
antiquewhite #FAEBD7 rgb(250,235,215) hsl(34, 78%, 91%)
aqua / cyan #00FFFF rgb(0,255,255) hsl(180, 100%, 50%)
aquamarine #7FFFD4 rgb(127,255,212) hsl(160, 100%, 75%)
azure #F0FFFF rgb(240,255,255) hsl(180, 100%, 97%)
beige #F5F5DC rgb(245,245,220) hsl(60, 56%, 91%)
bisque #FFE4C4 rgb(255,228,196) hsl(33, 100%, 88%)
black #000000 rgb(0,0,0) hsl(0, 0%, 0%)
blanchedalmond #FFEBCD rgb(255,235,205) hsl(36, 100%, 90%)
blue #0000FF rgb(0,0,255) hsl(240, 100%, 50%)
blueviolet #8A2BE2 rgb(138,43,226) hsl(271, 76%, 53%)
brown #A52A2A rgb(165,42,42) hsl(0, 59%, 41%)
burlywood #DEB887 rgb(222,184,135) hsl(34, 57%, 70%)
cadetblue #5F9EA0 rgb(95,158,160) hsl(182, 25%, 50%)
chartreuse #7FFF00 rgb(127,255,0) hsl(90, 100%, 50%)
chocolate #D2691E rgb(210,105,30) hsl(25, 75%, 47%)
coral #FF7F50 rgb(255,127,80) hsl(16, 100%, 66%)
cornflowerblue #6495ED rgb(100,149,237) hsl(219, 79%, 66%)
cornsilk #FFF8DC rgb(255,248,220) hsl(48, 100%, 93%)
crimson #DC143C rgb(220,20,60) hsl(348, 83%, 58%)
cyan / aqua #00FFFF rgb(0,255,255) hsl(180, 100%, 50%)
darkblue #00008B rgb(0,0,139) hsl(240, 100%, 27%);
darkcyan #008B8B rgb(0,139,139) hsl(180, 100%, 27%)
darkgoldenrod #B8860B rgb(184,134,11) hsl(43, 89%, 38%)
darkgray / darkgrey #A9A9A9 rgb(169,169,169) hsl(0, 0%, 66%)
darkgreen #006400 rgb(0,100,0) hsl(120, 100%, 20%)
darkkhaki #BDB76B rgb(189,183,107) hsl(56, 38%, 58%)
darkmagenta #8B008B rgb(139,0,139) hsl(300, 100%, 27%)
darkolivegreen #556B2F rgb(85,107,47) hsl(82, 39%, 30%)
darkorange #FF8C00 rgb(255,140,0) hsl(33, 100%, 50%)
darkorchid #9932CC rgb(153,50,204) hsl(280, 61%, 50%)
darkred #8B0000 rgb(139,0,0) hsl(0, 100%, 27%)
darksalmon #E9967A rgb(233,150,122) hsl(15, 72%, 70%)
darkseagreen #8FBC8F rgb(143,188,143) hsl(120, 25%, 65%)
darkslateblue #483D8B rgb(72,61,139) hsl(248, 39%, 39%)
darkslategray / darkslategrey #2F4F4F rgb(47,79,79) hsl(180, 25%, 25%
darkturquoise #00CED1 rgb(0,206,209) hsl(181, 100%, 41%)
darkviolet #9400D3 rgb(148,0,211) hsl(282, 100%, 41%)
deeppink #FF1493 rgb(255,20,147) hsl(328, 100%, 54%)
deepskyblue #00BFFF rgb(0,191,255) hsl(195, 100%, 50%)
dimgray / dimgrey #696969 rgb(105,105,105) hsl(0, 0%, 41%)
dodgerblue #1E90FF rgb(30,144,255) hsl(210, 100%, 56%)
firebrick #B22222 rgb(178,34,34) hsl(0, 68%, 42%)
floralwhite #FFFAF0 rgb(255,250,240) hsl(40, 100%, 97%)
forestgreen #228B22 rgb(34,139,34) hsl(120, 61%, 34%)
fuchsia / magenta #FF00FF rgb(255,0,255) hsl(300, 100%, 50%)
gainsboro #DCDCDC rgb(220,220,220) hsl(0, 0%, 86%)
ghostwhite #F8F8FF rgb(248,248,255) hsl(240, 100%, 99%)
gold #FFD700 rgb(255,215,0) hsl(51, 100%, 50%)
goldenrod #DAA520 rgb(218,165,32) hsl(43, 74%, 49%)
gray / grey #808080 rgb(128,128,128) hsl(0, 0%, 50%)
green #008000 rgb(0,128,0) hsl(120, 100%, 25%)
greenyellow #ADFF2F rgb(173,255,47) hsl(84, 100%, 59%)
honeydew #F0FFF0 rgb(240,255,240) hsl(120, 100%, 97%)
hotpink #FF69B4 rgb(255,105,180) hsl(330, 100%, 71%)
indianred #CD5C5C rgb(205,92,92) hsl(0, 53%, 58%)
indigo #4B0082 rgb(75,0,130) hsl(275, 100%, 25%)
ivory #FFFFF0 rgb(255,255,240) hsl(60, 100%, 97%)
khaki #F0E68C rgb(240,230,140) hsl(54, 77%, 75%)
lavender #E6E6FA rgb(230,230,250) hsl(240, 67%, 94%)
lavenderblush #FFF0F5 rgb(255,240,245) hsl(340, 100%, 97%)
lawngreen #7CFC00 rgb(124,252,0) hsl(90, 100%, 49%)
lemonchiffon #FFFACD rgb(255,250,205) hsl(54, 100%, 90%)
lightblue #ADD8E6 rgb(173,216,230) hsl(195, 53%, 79%)
lightcoral #F08080 rgb(240,128,128) hsl(0, 79%, 72%)
lightcyan #E0FFFF rgb(224,255,255) hsl(180, 100%, 94%)
lightgoldenrodyellow #FAFAD2 rgb(250,250,210) hsl(60, 80%, 90%)
lightgray / lightgrey #D3D3D3 rgb(211,211,211) hsl(0, 0%, 83%)
lightgreen #90EE90 rgb(144,238,144) hsl(120, 73%, 75%)
lightpink #FFB6C1 rgb(255,182,193) hsl(351, 100%, 86%)
lightsalmon #FFA07A rgb(255,160,122) hsl(17, 100%, 74%)
lightseagreen #20B2AA rgb(32,178,170) hsl(177, 70%, 41%)
lightskyblue #87CEFA rgb(135,206,250) hsl(203, 92%, 75%)
lightslategray / lightslategrey #778899 rgb(119,136,153) hsl(210, 14%, 53%)
lightsteelblue #B0C4DE rgb(176,196,222) hsl(214, 41%, 78%)
lightyellow #FFFFE0 rgb(255,255,224) hsl(60, 100%, 94%)
lime #00FF00 rgb(0,255,0) hsl(120, 100%, 50%)
limegreen #32CD32 rgb(50,205,50) hsl(120, 61%, 50%)
linen #FAF0E6 rgb(250,240,230) hsl(30, 67%, 94%)
maroon #800000 rgb(128,0,0) hsl(0, 100%, 25%)
mediumaquamarine #66CDAA rgb(102,205,170) hsl(160, 51%, 60%)
mediumblue #0000CD rgb(0,0,205) hsl(240, 100%, 40%)
mediumorchid #BA55D3 rgb(186,85,211) hsl(288, 59%, 58%)
mediumpurple #9370DB rgb(147,112,219) hsl(260, 60%, 65%)
mediumseagreen #3CB371 rgb(60,179,113) hsl(147, 50%, 47%)
mediumslateblue #7B68EE rgb(123,104,238) hsl(249, 80%, 67%)
mediumspringgreen #00FA9A rgb(0,250,154) hsl(157, 100%, 49%)
mediumturquoise #48D1CC rgb(72,209,204) hsl(178, 60%, 55%)
mediumvioletred #C71585 rgb(199,21,133) hsl(322, 81%, 43%)
midnightblue #191970 rgb(25,25,112) hsl(240, 64%, 27%)
mintcream #F5FFFA rgb(245,255,250) hsl(150, 100%, 98%)
mistyrose #FFE4E1 rgb(255,228,225) hsl(6, 100%, 94%)
moccasin #FFE4B5 rgb(255,228,181) hsl(38, 100%, 85%)
navajowhite #FFDEAD rgb(255,222,173) hsl(36, 100%, 84%)
navy #000080 rgb(0,0,128) hsl(240, 100%, 25%)
oldlace #FDF5E6 rgb(253,245,230) hsl(39, 85%, 95%)
olive #808000 rgb(128,128,0) hsl(60, 100%, 25%)
olivedrab #6B8E23 rgb(107,142,35) hsl(80, 60%, 35%)
orange #FFA500 rgb(255,165,0) hsl(39, 100%, 50%
orangered #FF4500 rgb(255,69,0) hsl(16, 100%, 50%)
orchid #DA70D6 rgb(218,112,214) hsl(302, 59%, 65%)
palegoldenrod #EEE8AA rgb(238,232,170) hsl(55, 67%, 80%)
palegreen #98FB98 rgb(152,251,152) hsl(120, 93%, 79%)
paleturquoise #AFEEEE rgb(175,238,238) hsl(180, 65%, 81%)
palevioletred #DB7093 rgb(219,112,147) hsl(340, 60%, 65%)
papayawhip #FFEFD5 rgb(255,239,213) hsl(37, 100%, 92%)
peachpuff #FFDAB9 rgb(255,218,185) hsl(28, 100%, 86%)
peru #CD853F rgb(205,133,63) hsl(30, 59%, 53%)
pink #FFC0CB rgb(255,192,203) hsl(350, 100%, 88%)
plum #DDA0DD rgb(221,160,221) hsl(300, 47%, 75%)
powderblue #B0E0E6 rgb(176,224,230) hsl(187, 52%, 80%)
purple #800080 rgb(128,0,128) hsl(300, 100%, 25%)
red #FF0000 rgb(255,0,0) hsl(0, 100%, 50%)
rosybrown #BC8F8F rgb(188,143,143) hsl(0, 25%, 65%)
royalblue #4169E1 rgb(65,105,225) hsl(225, 73%, 57%)
saddlebrown #8B4513 rgb(139,69,19) hsl(25, 76%, 31%)
salmon #FA8072 rgb(250,128,114) hsl(6, 93%, 71%)
sandybrown #F4A460 rgb(244,164,96) hsl(28, 87%, 67%)
seagreen #2E8B57 rgb(46,139,87) hsl(146, 50%, 36%)
seashell #FFF5EE rgb(255,245,238) hsl(25, 100%, 97%)
sienna #A0522D rgb(160,82,45) hsl(19, 56%, 40%)
silver #C0C0C0 rgb(192,192,192) hsl(0, 0%, 75%)
skyblue #87CEEB rgb(135,206,235) hsl(197, 71%, 73%)
slateblue #6A5ACD rgb(106,90,205) hsl(248, 53%, 58%)
slategray / slategrey #708090 rgb(112,128,144) hsl(210, 13%, 50%)
snow #FFFAFA rgb(255,250,250) hsl(0, 100%, 99%)
springgreen #00FF7F rgb(0,255,127) hsl(150, 100%, 50%)
steelblue #4682B4 rgb(70,130,180) hsl(207, 44%, 49%)
tan #D2B48C rgb(210,180,140) hsl(34, 44%, 69%)
teal #008080 rgb(0,128,128) hsl(180, 100%, 25%)
thistle #D8BFD8 rgb(216,191,216) hsl(300, 24%, 80%)
tomato #FF6347 rgb(255,99,71) hsl(9, 100%, 64%)
turquoise #40E0D0 rgb(64,224,208) hsl(174, 72%, 56%)
violet #EE82EE rgb(238,130,238) hsl(300, 76%, 72%)
wheat #F5DEB3 rgb(245,222,179) hsl(39, 77%, 83%)
white #FFFFFF rgb(255,255,255) hsl(0, 100%, 100%)
whitesmoke #F5F5F5 rgb(245,245,245) hsl(0, 0%, 96%)
yellow #FFFF00 rgb(255,255,0) hsl(60, 100%, 50%)
yellowgreen #9ACD32 rgb(154,205,50 hsl(80, 61%, 50%);

CSS Value Lengths, Times, Frequencies and Angles

Many of the property values are keywords unique to that property. But for some properties, the values can include length, frequency or time values or units. In this article we go over all the math type units that can be applied as property values in CSS.

CSS Length Values

In terms of lengths, there are both relative and absolute lengths. Here is a quick summary of all of the length value types

unit meaning
em relative to the font size of the parent element.
ex relative to the height of the lowercase ‘x’
gd used in East Asian typography, not relevant to us
rem relative to the root font size
vw relative to the viewport width: the viewport width is 100vw
vh relative to the viewport height: the viewport height is 100vh
vm relative to viewport width or height, whichever is smaller
ch relative to the size of the 0 (zero)
px relative the screen resolution not the viewport size, : generally 1point, or 1/72 or an inch.
in an inch
cm a centimeter
mm millimeter
pt point is 1/72 of an inch
pc pica, or 1/12 of a point
% relative to the parent element, it’s normally defined self or other element defined by the property.

The most common value types in CSS include pixels and percents.

Pixels can be considered both a relative and absolute. Pixels are a relative measurement because the measurement is based on the screen resolution of the monitor or screen, rather than the viewport size. However, pixels are also an absolute size because lengths given in pixels are immutable: they can only be increased via zoom features.

Images, such as jpeg photos and gifs have an absolute width and height, defined in pixels. Increasing or decreasing the size of these image types with CSS or via the width and height attributes of the image tag distort the image.

Angles, Times and Frequencies:

With some of the new CSS3, such as transforms and animations, length units do not suffice. We also need to learn and understand angles, times and frequencies. These measurements have been around and used in aural style sheets, but now with browser support for transitions, transforms and animations, angles and times have become relevant to the screen as well. The units of angles, times and frequencies are shown and described in greater detail below.

unit meaning
deg degrees
grad grads
rad radians
turn turns
ms milliseconds
s seconds
Hz Hertz
kHz kilohertz

Originally, all of the above units, frequencies and times, other than the new ‘turn’ unit, were introduced as aural values. The units used for aural style sheets are angles, specified in rad (radians), deg (degrees), or grad (gradians). Frequencies are specified in Hz (Hertz) or kHz (kilohertz).

Times are specified in ms (milliseconds), or s (seconds). The default unit for all of the length, angle, time and frequency values is zero, and all the values are interpreted as floats.

CSS Angle Measurement

Angle measurement types include degrees, grads, rads and turns.


Degrees range from 0 to 360deg, with those two being equal. Positive degrees go clockwise, negative degrees go counter clock wise. For example, -90deg is one quarter of the way around counter clock-wise, turning it on its left side. 90deg will turn it clockwise 90 degrees.
The CSS for the the image below reads (in part):

 .image1, image5 { 
                        -webkit-transform: rotate(-5deg);
                        -ms-transform: rotate(-5deg); 
                       transform: rotate(-5deg);
  .image2, image4 {
                        -webkit-transform: rotate(7deg);
                        -ms-transform: rotate(7deg);
                      transform: rotate(7deg);



A grad, or gradian, is equivalent to 1⁄400 of a full circle. Similar to degrees, a positive grad value will go clockwise, a negative value goes counter clockwise 100grad will be at a 90% angle. (see figure 4.4)


A rad, or radian, is equal to 180/π degrees, or about 57.3 degrees. An angle of 1 radian on a circumference of a circle creates an arc with an equal length to the radius of the circle. 1.570796326794897rad is the same value as 100grad and as 90deg.
90deg is the same as 100grad is the same as 1.508rad


Turns, are new in CSS3, and mean a rotation. One turn is equal to 360deg. For example, 2turn = 720deg. Note that turn is singular, and there is no space between the number and its unit..
rotate(900deg) is equivalent to rotate(2.5turn)


Time units are much easier to explain than grads! There are two units of measurement: seconds (ms) and milliseconds (s). There are 1,000 milliseconds in a second. The format of a time value is a number followed by ‘s’ for seconds or ‘ms’ for milliseconds.
0.5s = 500ms


Frequency values are used with aural (or spoken) cascading style sheets. There are two value units: ‘Hz’, or Hertz and ‘kHz’ or kilohertz, 1,000Hz = 1kHz (case-insensitive). Frequencies can be used to change the pitch of a voice reading text. A low frequency is a bass sound, a high frequency is a treble. When CSS like the following snippet is used, a low-pitched voice, such

p.low { pitch: 105Hz; }
q.squeal {pitch: 135Hz;}

Hack for CSS3 Supporting Browsers

Implementing CSS3 features in your CSS file can be complex. You have to make sure that the CSS you’re feeding to FF3.5+, Chrome, Opera and Safari are not being read by FF2, IE6, IE7 and IE8. There’s a simple hack to make sure that your CSS3 is fed only to browsers that support it… it’s forward compliant and it’s valid markup.


To target all browsers that support CSS3, and hide from the IEs, simply add :nth-of-type(1n) to your selector.

  h3:nth-of-type(1n)  {
      color: #FFFFFF;
      background-color: #FFFFFF;
           3px 3px 3px rgba(0, 0, 0, 0.4);

In the above example, we’ll end up with white text on a white background, with the letters being defined by the drop shadow. You definitely don’t want to feed that to browsers that don’t support text-shadow: white text on white backgroud *IS* illegible.

:nth-of-type(1n) basically means “every”. So, it’s the same as not including it in terms of what selectors will be matched. Do note that you are adding a pseudo-class, so you are adding specificity. This pseudo-class is not understood by browsers that don’t support CSS3 selectors which is the same as those that don’t understand CSS3 properties and CSS3 property values.

For example, I have a row of images with captions going across a page. To make it more interesting, I made the pictures look like Polaroids. It looks fine plain, but why not add some fun CSS3.

/* understood by all browser */
.slides li {
	width: 188px;
.slides img {
/* for CSS3 supportive browsers only */
.slides li:nth-of-type(1n) {
	-moz-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	box-shadow:0 3px 6px rgba(0, 0, 0, 0.25);
	background:none repeat scroll 0 0 #FFFFFF;
	margin:0 0 27px 0;
	padding:10px 10px 15px;
.slides li:nth-of-type(even){
.slides li:nth-of-type(3n){

The images look fine in IE, but look cool in FF3.6

Do make sure that the new CSS3 property is generally supported before using this hack. This is a general filter for generally supported CSS3. It works for multiple background images, text-shadow, border radius, and other well supported CSS3 properties and values. Don’t use this for CSS3 transitions, columns and animations until those are better supported in modern browsers. I have grids of browser support for all sorts of CSS3 properties, so take a look at those before relying on this filter.

Border Properties, Values & Browser Support

NOTE: Last major update: May 28, 2011

While Safari, Firefox, Chrome and Opera all support versions of border images, they only support the shorthand version of that propery. At the time of this writing, they do not support the individual properties of border-image-repeat, border-image-slice, border-image-width, border-image-source, etc. In addition, they do not all support the same property and values the same way.


Note: The properties link to the W3C specifications. The ‘details’ links point to descriptions further down the page where everything is explained in more depth.

default IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-color (details) CSS2
transparent   Χ
rgb(r, g, b)   Δ Δ
#RGB (#fff)
#RRGGBB (#ffffff)  
named colors   Δ Δ
rgba(r, g, b, a) CSS3 Χ Χ Χ
hsl(h, s%, l%) CSS3 Χ Χ Χ
hsla(h, s%, l%, a) CSS3 Χ Χ Χ
inherit Δ Δ
currentColor default Δ Δ Δ
-moz-border-SIDE-colors (details) spec-less           -moz-      
border-style (details)  
groove   Δ Δ
hidden   Χ Χ
inset   Δ Δ
outset   Δ Δ
ridge Δ Δ
border-width (details) Δ Δ
border (shorthand)   Δ Δ
border-collapse (details)   Δ Δ
inherit Χ Χ
border-spacing (details) Χ Χ
length   Χ Χ
inherit   Χ Χ
New in CSS3 default IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-image-source (details) CSS3 Χ Χ Χ Χ Χ Χ Χ Χ Χ
url(imagesource) Χ Χ Χ Χ Χ        
none default Χ Χ Χ Χ Χ        
border-image-slice (details)   Χ Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ        
fill   Χ Χ Χ Χ Χ        
border-image-width (details) Χ Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4}   Χ Χ Χ Χ Χ       Χ
auto   Χ Χ Χ Χ Χ Χ Χ Χ Χ
border-image-outset (details) Χ Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ Χ Χ Χ Χ
border-image-repeat (details) Χ Χ Χ Χ Χ Χ Χ Χ Χ
stretch   Χ Χ Χ Χ Χ        
repeat   Χ Χ Χ Χ Χ        
round   Χ Χ Χ Χ Χ        
space   Χ Χ Χ Χ Χ Χ Χ Χ Χ
border-image (details)   Χ Χ Χ Χ Χ -moz- -webkit- -webkit- -o-
see individual properties   Χ Χ Χ Χ Χ
border-radius (details)   Χ Χ Χ    
length{1}   Χ Χ Χ    
length{2,4}   Χ Χ Χ     Χ Χ
length{1} / length{1} (elliptical)   Χ Χ Χ     Χ Χ
length{2,4} / length{2,4} (elliptical)   Χ Χ Χ     Χ Χ
border-top-left-radius (longhand)   Χ Χ Χ    
length{1} (round)   Χ Χ Χ    
length{1} length{1} (elliptical)   Χ Χ Χ    
percentage values for length   Χ Χ Χ     Χ Χ Χ
box-decoration-break (details)   Χ Χ Χ Χ Χ Χ Χ Χ
clone   Χ Χ Χ Χ Χ Χ Χ Χ
slice   Χ Χ Χ Χ Χ Χ Χ Χ
box-shadow (details)   Χ Χ Χ -webkit-
length{1,4}   Χ Χ Χ
inset length{1,4}   Χ Χ Χ
none   Χ Χ Χ
length{1,4}, length {1,4}   Χ Χ Χ    

The individual properties, values and browser support and quirks in Detail


The border-color property allows you to define the color of the border on elements upon which you are set a border. All browsers that support borders, in general, support border color. The default value is the same color as the text color, or ‘currentColor’. Even though not all browsers support the ‘currentColor’ keyterm, all browsers will render the currentColor if declared, except in IE8. IE8 will inherit the browser color instead of rendering the currentColor, which is only an issue if you are overriding a different border color that you defined with less or equal specificity in the cascade. Some browsers support multiple border colors via the border-colors property. See the next section.

Property Values for border-color

transparent | rgb(r, g, b) | #RGB (#fff) | #RRGGBB (#ffffff) |
colorName (green) | rgba(r, g, b, a) | hsl(h, s%, l%) |
hsla(h, s%, l%, a) | inherit | currentColor

Browser support for border-color

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
transparent Χ
rgb(r, g, b) Δ Δ
#RGB (#fff)
#RRGGBB (#ffffff)
named colors Δ Δ
rgba(r, g, b, a) Χ Χ Χ
hsl(h, s%, l%) Χ Χ Χ
hsla(h, s%, l%, a) Χ Χ Χ
inherit Δ Δ
currentColor Δ Δ Δ

Browser quirks in rendering border-color

  • IE6 does not understand the keyterm ‘transparent
  • IE6 and IE7 understand RGB, but render colors when value is mixed % and number (when it shouldn’t). While IE6 and IE7 do understand rgb(), they support mixing of percent and integer values, which is against specifications, but really shouldn’t be an issue. test page
  • IE6, IE7 and IE8 do not understand rgba, hsl or hsla.
  • IE6, IE7 and IE8 do not understand the keyterm currentColor. They all correctly use the current color as the default if no border-color is declared, but they don’t actually understand the keyterm. IE8 ignores the call completely. IE6 and IE7 inherit.
  • IE6 and IE7 do not understand ‘hidden‘ as a border-style, and inherits.
  • IE6 does ok with all named colors except for silver.
  • Neither IE6 nor IE7 understand named colors with the color ‘grey’. It has to be written in American English, with an A -> ‘gray’. test page




The border-(side)-colors properties are NOT in the w3C specifications, and only work in Mozilla. see -moz-border-top-colors

When an element has a border that is larger than 1px, each line of pixels uses the next color specified in this property, from the outside in, eliminating the need for nested boxes. Each pixel of border needs to have a specified color. If not, it defaults to the innermost color specified.

Does not work on dotted and dashed styles or collapsed table borders. At this time, each side must be declared individually.

border: 8px solid #ccc;
-moz-border-bottom-colors: #C00  #c30 #cc0 #FF0 #0C0 #00C #C0C #909;
-moz-border-top-colors:    #C00  #c30 #cc0 #FF0 #0C0 #00C #C0C #909;
-moz-border-left-colors:   #000  #666 #777 #888 #999 #aaa #bbb #000;
-moz-border-right-colors:  #000  #666 #777 #888 #999 #aaa #bbb #000;

In Firefox 1.0+, the above code snipped as grey shaded borders on the right and left, and happy pride colors on the top and bottom.

This property is not part of the w3c css specifications. And, in fact, is not needed. The same effect can be done with text-shadow or outline, except that neither text-shadow nor outline effect the box model. The other option is border image with a gradient.

Browser support for the non-standard border colors properties

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera


The border-style property allows you to define the style of the border on elements upon which you set a border. All browsers support the border-style property, but some browsers don’t understand and / or misrender some of the values. The default value is ‘none’.

Property Values for border-style

dashed | dotted | double | groove | hidden | inset | none | outset | ridge | solid

Browser support for border-style

IE6 IE7 IE8 FF Safari Chrome Opera
groove Δ Δ
hidden Χ Χ
inset Δ Δ
outset Δ Δ
ridge Δ Δ

Browser quirks in rendering border-style

  • The Webkit browsers ignore color when rendering the groove, inset, outset and ridge values. The spec is a little ambivalent about whether this is correct or not, but since all other browser engines don’t ignore border color, and it makes no sense to me that color is ignored, webkit fails!
  • IE6 and IE7 do not understand ‘hidden’, and inherits.
  • Note the inset and outset are supposed to be rendered as ridge and groove if border is set to collapse. I did not test these!


if you need to use Groove, Inset, Outset or Ridge, realize that these border types will appear different depending on the browser. Opt for declaring different colors for different borders to create the same effect instead.




The border-width property allows you to define the width of the border on elements upon which you set a border. All browsers that support borders support border-width. The default value is ‘medium’, which is about 3px wide. You can use the key terms thin, medium or thick, or any of the CSS lengths: em, px, etc.

Property Values for border-width

thin | medium | thick | lenght (% | em | px | ex | mm ...)

Browser support for border-width

IE6 IE7 IE8 FF Safari Chrome Opera
border-width Δ Δ

Browser quirks in rendering border-width

  • While all browsers support all the values, IE6 and IE7 get the box model wrong. Otherwise, they do get the values correct.


Need to create a triangle? You can create a triangle by using borders. To create the grey triangle you see below you can use the following code:

div::after {
	content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 10px solid #FF0000;




The border shorthand property is shorthand for both




The border property allows you to define the width, color and style of the border of all four sides of your element in one simple declaration. All browsers that support borders support the border shorthand property, with the caveats of the three individual properties expanded upon above.

The order of the three values does not matter. The only required value is the style. The other two are optional.

Property Values for border

 border-style && border-width && border-color

Browser support for border

IE6 IE7 IE8 FF Safari Chrome Opera
border Δ Δ

Browser quirks in rendering border

  • The only required property is the style of the border. However, if color and width are not declared, they should default to the default value of medium width and currentColor. IE6 and IE7 inherit from less specific declarations instead of resetting. That might not make sense, so let me expalin:
          border: 1px solid #FF0000;
          border: dotted;

    The above should render a border as if it was written

    border: medium dotted currentColor /* expected appearance */

    but instead, in IE6 and IE7 only, renders as

    border: 1px dotted #FF0000; /* IE6 and IE7 rendering values *




The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML. Supported in all browsers, the value of collapse collapses table borders into a single border when possible, ignoring border-spacing and empty-cells properties. The value of separate, which is the default, leads to detached table borders, where border-spacing and empty-cells properties are headed. If there is spacing, there will be white space between the borders of adjacent table cells. When set to inherit, the value of the border-collapse property is supposed to be inherited from the declaration on the parent element.

Note that at the time of this writing, border-collapse is not listed in the CSS3 documentation. It *IS* part of CSS3 as well, it just hasn’t changed since CSS2.1, so including it into the specifications is considered low priority.

Property Values for border-collapse

collapse | separate | inherit

Browser support for border-collapse

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-collapse Δ Δ
inherit Χ Χ

Browser quirks in rendering border-collapse

  • IE6 and IE7 doesn’t understand inherit: instead of inheriting from the parent, it inherits from less specific values set for the property in the cascade if any are present. If no value has been declared with less specificity, defaults to separate.

  • If set to collapse, the inset and outset border-styles are supposed to be rendered as ridge and groove respectively.




The border-spacing only has any effect if the border-collapse property is NOT set to collapse. The border-spacing property sets the distance between the borders of adjacent cells — which is why border-collapse: separate is a default prerequisit. Supported in all browsers.

Note that at the time of this writing, border-spacing is not listed in the CSS3 documentation. It IS part of CSS3 as well, it just hasn’t changed since CSS2.1, so including it into the specifications is considered low priority.

Property Values for border-spacing

length (px, em, %, etc) | inherit

Browser support for border-spacing

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-spacing Χ Χ
length Χ Χ
inherit Χ Χ

Browser quirks in rendering border-spacing

  • IE6 and IE7 doesn’t understand border-spacing.



Finally! We finally get to CSS3 Properties. w00t!


The border-radius property is actually shorthand for border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius in that order. But, save bytes, and confusion, by using the shorthand.


For rounded corners (versus elliptical), declare between one to four values. For elliptical corners, when using the shorthand, separate the vertical radius declarations from the horizontal radius with a slash.


Add "-moz-" in front of the property name for Firefox 3.6 and earlier (and -webkit for safari 4 and earlier). All other browsers that support border-radius now do so without a prefix.

Percentage values: The CSS3 spec states that percentages refer to corresponding dimension of the border box. Percentages for the horizontal radius refer to the width of the box and percentages for the vertical radius refer to the height of the box.

Safari 5 doesn’t understand percentage as a length for border radius. This is fixed in the nightly builds. But, it means if you include a % value, the entire declaration will be ignored. Opera does something really funky. It understands % lengths, but handles it really odd: seemingly relative to the window or the worlds largest monitor when floated: i can’t tell. Not floated, it’s still a little off


Property Values for border-radius

length{1,4} |  length{1,4}/length{1,4}

Browser support for border-radius

IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 Safari 4 Safari 5 Chrome Opera
border-radius Χ Χ Χ -moz- -webkit-
length{1} Χ Χ Χ
length{2,4} Χ Χ Χ Χ
length{1} / length{1} (elliptical) Χ Χ Χ Χ
length{2,4} / length{2,4} (elliptical) Χ Χ Χ Χ
border-top-left-radius (longhand) Χ Χ Χ
length{1} (round) Χ Χ Χ
length{1} length{1} (elliptical) Χ Χ Χ
percentage values for length Χ Χ Χ Χ   Χ Χ Χ

Browser quirks in rendering border-radius

  • IE6, IE7 and IE8 don’t understand any version of border-radius, and never will.

  • Safari 5 does NOT understand percentages for radii values. This has been fixed in the webkit nightlies, and should be resolved in Safari 6
  • Opera get’s the curve slightly wrong, and completely off when floated.


/* Long hand way */
   border-top-left-radius: 15px;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 20px;

/* Longhand elliptical */
   border-top-left-radius: 15px 5px ;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 5px 15px;
   border-bottom-left-radius: 20px;

/* shorthand values */
  -moz-border-radius: 15px 10px 5px 20px; /* for FF3.6 */
       border-radius: 15px 10px 5px 20px;

/* shorthand values */
  -moz-border-radius: 15px 10px 5px 20px / 5px 10px 15px 20px; /* for FF3.6 */
       border-radius: 15px 10px 5px 20px / 5px 10px 15px 20px;

There’s a border radius generator that only handles one value per corner

Elliptical (versus Rounded) Corners.

When using shorthand for elliptical corners, separate the vertical from the horizontal radii with a slash. When using shorthand, no slash is used.

-moz-border-radius: 10px / 40px;  
border-radius: 10px / 40px;

When declaring different radii for different corners, the order of the corners is topleft, topright, bottomright, bottomleft, when 4 values are given. Similar to TRBL of borders, if you only declare two values, then the first is for topleft/bottomright, and the second value is for topright/bottomleft. But webkit only understands 1 value for shorthand. Safari/WebKit doesn’t support the slash (/) notation. If two values are specified, an elliptical border is drawn on all 4 cornersIn this example, where as Moz and Opera correction create an odd shape with evenly rounded corners (see the image if you’re not in a browser that renders correctly), in webkit browsers all four corners will be the same.

-moz-border-radius: 15px 30px; 
border-radius: 15px 30px; 

The syntax for creating a single elliptical corner is the same for all browsers: no slash. Also note that the syntax for Mozilla 3.6 and earlier differed from the rest.

-moz-border-radius-topleft: 15px 30px; 
border-top-left-radius: 15px 30px;

Webkit does not understand percentages as border radius values.
Firefox 3.6 understands %, but uses percent of width to make rounded corners instead of proportional percentages (based on width *AND* height).
Opera can be screwy.

-moz-border-radius: 10%; 
border-radius: 10%;




The border-decoration-break property determines how the border appears should there be a break in content flow on an element that has a border applied. Breaks include a box that has a border broken by a page break (print), column break (using the CSS3 column properites), or, for inline elements, at a line break. This property determines if a border should be inserted on both sides of the break (before and after), or the break should not open and close the border, in effect, leaving it open. The value ‘clone’ will add border-style and/or border-image with padding if there is a break, as if it was the normal end of the box, creating mini-boxes. The value ‘slice’ will not add padding or border at the break, basically slicing the border as you would a cake.

The box-decoration-break property specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding. For backgrounds it defines how the background positioning area is derived from these multiple boxes and how the element’s background is drawn within them. The default is slice.

Property Values for box-decoration-break

clone | slice

Browser support for box-decoration-break

IE6 IE7 IE8 IE9 FF Safari Chrome Opera
box-decoration-breakt (details) Χ Χ Χ Χ Χ Χ Χ  
clone Χ Χ Χ Χ Χ Χ Χ  

Opera is the first browser to support box-decoration-break value of ‘clone’ The reason the ‘slice’ value is listed as working in the grid is because slice is the default. So, even without understanding ‘box-decoration-break’ or ‘slice’, that is what happens by default.


The box-shadow property enables you to add drop shadows or inset shadows on elements. One or more box-shadows can be attached to a box, by which you can create some pretty cool effects. Shadows are drawn just outside the border, or just inside in the case of inset. In terms of the box-model, shadows are similar to ‘outline’, and do not influence the layout: they may overlap with other boxes.

Property Values for box-shadow

none | inset || [ length(left) length(top) length(blur) ? length(spread) ? || color ]{1,n}

What the box-shadow property values mean

box-shadow: 3px 3px 3px 3px rgba(0,0,0, 0.4);

The first length value is the left offset of the shadow. A negative value will put the shadow on the left, positive to the right.

The second length value is the top offset. A negative value will put the shadow above the bo, a positive value will place the shadow below the box.

The third length value is a blur radius. Negative values are not allowed. If it is 0, the shadow is solid. The larger the value, blurrier the shadow will be.

The fourth length value is the spread.

The last value is the color. Always include the color. The default value of the color (the value of color if the color is omitted) is still being debated. While to me it makes sense that the default value should be currentColor, the working group is currently considering a black shadow. I strongly disagree. I *HIGHLY* recommend using RGBA if your blur radius is greater than 0, as the effect is much prettier if you start from a slightly transparent version of your color, especially if you are using black, than if you start with an opaque version of grey or other color..

box-shadow:       2px  -5px  4px 1px rgba(255, 255, 48, 0.5),
                  5px -10px  6px 3px rgba(255, 224, 48, 0.5),
                  7px -15px 11px 5px rgba(240, 128,  0, 0.4),
                  12px -25px 18px 7px rgba(200,   0,  0, 0.3),
                  inset 2px  -2px  5px     rgba(255, 255,  0, 0.5),
                  inset 5px  -5px 25px 5px rgba(255,   0,  0, 0.8);

In this meteor example, (it’s in an iframe due to WordPress liking to eat my code) the fourth value is the spread radius: the shadow grows in all directions by the radius value given. Negative values shrink the shadow. This is a multiple box shadow example, that works well in Firefox and Opera. Webkit should get it working soon, but they aren’t there yet:

The ‘inset’ keyword, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it) . I generally use inset for shadows on textareas and other user input element.

Browser support for box-shadow

IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 Safari Chrome Opera
box-shadow (details) Χ Χ Χ -moz- -webkit-
length{1,4} Χ Χ Χ
inset length{1,4} Χ Χ Χ
none Χ Χ Χ
length{1,4}, length {1,4} Χ Χ Χ

Browser quirks in rendering box-shadow

  • IE6 and IE7 doesn’t understand box-shadow, and never will.

  • Mozilla 3.6 and Safari require browser specific prefixes
  • Webkit can die on inset shadows. Yes, it understands inset shadows, but it uses a lot of CPU and can freeze up your browser. This issue is resolved in webkit nightly, so should be good in Safari 6



Border-Image Properties & Values

At first the idea of ‘border-image’ scared the crap out of me. Were people going to start putting images around all their elements and start creating layouts reminiscent of the hideiousness that was the 1996 web? Then i realized the utitlity of border images in creating buttons. Then it occurred to me that with background linear gradients, there was no need for border-images. However, border images are better supported than linear gradients, and I haven’t written about linear gradients yet (coming, soon hopefully). So, let’s dive in!

Unlike all the other shorthand properties, where I first explain the components and then explain the shorthand, for the new to CSS3 Border-Image properties we’re going to start with the short hand, since the shorthand is fairly well supported outside of the IEs, but the individual properties… not supported at all.


Unlike the individual properties of other shorthand properties, browsers that support the shorthand property are not yet supporting the properties that make up the shorthand as individual properties. Do, however, read up on the individual properties so that you may better understand how to write the short hand property.

Note that if an element has both a border-image and a border declared, the border-image property supercedes the regular border declaration.

‘none’ is a value for border-image-source, not the border-image shorthand, in the specifications. Using ‘none’ as the value, will mean that no background image will be rendered as, by default, all the values (source, slice, width, outset and repeat) that are not explicitly set in the shorthand border-image call are set to their individual defaults, and we’re setting source to its default of ‘none’. I am including ‘none’ in the support table just in case you read no further.

The border image property is both short for:


and short for


The border-image is defined by ‘border-image-source’. The image is sliced into 9 sections with the ‘border-image-slice’ values. Those 9 section are then scaled, positioned, and tiled into their corresponding border image regions in four steps by :

Value of border-image

border-image-source || border-image-slice {1,4} [ / 'border-image-width'? [ / 'border-image-outset' ]? ]? || 'border-image-repeat' 

Syntax of border-image shorthand

border-image: url() slice{1,4} /width_px{1,4} repeat{1,2}
-moz-border-image: url(../wp-content/themes/green/i/button.gif) 5 / 5px stretch;
-webkit-border-image: url(../wp-content/themes/green/i/button.gif) 5 / 5px stretch

Browser support for border-image

IE6 IE7 IE8 FF Safari Chrome Opera
border-image Χ Χ Χ -moz- -webkit- -webkit- -o-
source slice width outset repeat Χ Χ Χ

Browser quirks in rendering border-image

  • IE6, IE7, IE8 and IE9 do not support border image and never will
  • Mozilla and webkit browsers require the -moz- and -webkit- prefixes respectively.
  • While Mozilla, Webkit and Opera support the shorthand border-image property, they do not support the individual property declarations that make up the shorthand.
  • Opera is finicky: while omitted values should be at their default value, if you omit a value in Opera, the entire declaration fails.


Similar to background-image property, the value of the border-image-source is the relative or absolute path to the image file on the server, or none. No browser supports this stand alone value. If you want to override the border background image on an element, you have to use the shorthand border-image property, and redeclare all values in the shorthand. Note that unlike the CSS3 background-image property, there can only be one background image declared for an elements border. If both

Property Values for border-image-source

url(imagesource) | none

Browser support for border-image-source

  IE6 IE7 IE8 IE9 FF Safari Chrome Opera
border-image-source Χ Χ Χ Χ Χ Χ Χ Χ
url(imagesource) Χ Χ Χ Χ
none Χ Χ Χ Χ

Browser quirks in rendering border-image-source

  • No browsers support this property as a standalone.
  • As part of the shorthand, it is supported in all non-IE browsers.
  • User the -webkit- prefix for Safari and Chrome. Use the -moz- prefix for Mozilla. No prefix is required for Opera.


The ‘border-image-slice’ property values represent inward offsets from the top, right, bottom, and left (TRouBLe) edges respectively of the image. In effect, the browser divides the one border image and the elements border into nine regions: four corners, four edges and a middle.

Use the border-image-slice properties to define what parts of your image are going to be in the corners, and what parts make up the rest.

The border image can also be used as the background image: use the ‘fill’ keyword to do this. Without the ‘fill’, the center part of the image part will be made as transparent. If fill is used, the border-image sits on-top of the background image, in effect hiding it if there are no transparent pixels. No browser supports the fill keyterm, but all seem to do it by default. The default value is 100%.

Property Values for border-image-slice

length{1,4} && fill

Browser Support for border-image-slice

IE6 IE7 IE8 FF Safari Chrome Opera
border-image-slice Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ
fill Χ Χ Χ Χ Χ Χ Χ

Do not declare ‘fill’ as it will kill the rest of the rendering. However, it seems to be the default, so it ‘works’, it just doesn’t work.


The border-image-width is the width of the border in terms of the box model. The element has the width and height as determined by the content and CSS declarations. Adding any value other than 0 (or the 1 default) increases the height and width of the element by the value declared. If percentages are used, the percentage is relative to the image width and height, not the element’s width and height. The default is 1. I have not tested all value types, just the general property as part of the shorthand.

Note that if you do not declare a border-image-width, but do declare a regular border-width, the CSS2.1 border-width will be inherited.

Property Values for border-image-width

length{1,4} | auto

Browser support for border-image-width

IE6 IE7 IE8 IE9 FF Safari Chrome Opera
border-image-width Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ
auto Χ Χ Χ Χ Χ Χ Χ Χ

Browser quirks in rendering border-image-width

  • Like the other longhand border-image properties, there is no browser support for the individual border-image-width property.
  • Opera does not support the border-image-width property even as part of the shorthand. Makes the whole declaration fail.
  • No browser supports the value of ‘auto’. including ‘auto’ makes the entire declaration fail.


The values of the border-image-outset property specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. Numbers represent multiples of the corresponding border-width. I have no clue how this is supposed to actually render, but it is not supported anywhere. If included, the entire declaration fails. The default is 0.

Property Values for border-image-outset


Browser support for border-image-outset

IE6 IE7 IE8 IE9 FF Safari Chrome Opera
border-image-outset (details) Χ Χ Χ Χ Χ Χ Χ Χ
length{1,4} Χ Χ Χ Χ Χ Χ Χ Χ


By default, the border image is repeated. There is NO way to not fill up the element with the border image. What we have is different options on how to fill up the area. . The ‘stretch’ value will not tile the image, but rather stretch it to fill the area provided. Stretch is the default. The ‘repeat’ value will tile the image to fill the area. This is to fill the area BETWEEN the corners. The ’round’ value is similar to repeat, but if it does not fill the area with a whole number of tiles, the image will be stretched so that it does. When using either of these values, make sure that your slicing width cuts your tile so that it retiles nicely.
The ‘space’ value doesn’t seem to be supported. Similar to repeat, except
if the repeated image does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

Property Values for border-image-repeat

stretch | repeat | round | space

Browser support for border-image-repeat

IE6 IE7 IE8 FF Safari Chrome Opera
border-image-repeat (details) Χ Χ Χ Χ Χ Χ Χ
stretch Χ Χ Χ
repeat Χ Χ Χ
round Χ Χ Χ
space Χ Χ Χ Χ Χ Χ Χ


  • While webkit doesn’t fail on the round property, it uses ‘repeat’ instead

CSS Background Properties: possible values, default values, browser support and DOM

Everything you could possibly want to know about CSS Background Properties: Interpreting the w3c specifications with browser support and links to examples and test cases.

Last Major Update: May 26, 2011

There are 8 attributes controlling background images. The CSS3 background properties are very well supported in modern browsers, but a few values are not. Also, there are some properties and values that have not yet made it into the specifications, but are already supported in all browsers except Firefox.. This blog post goes over all the existing and future attributes, targeting them with the DOM, and lets you know of bugs you may find when implementing backgrounds.

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-clip
  • background-origin
  • background-size
  • background-inline-policy – (not in the specifications)
  • shorthand: background, which includes the above attributes that are in the specifications.
  • Each property has a list of possible values. Many developers use the “background:” shorthand. I advocate against using the shorthand, as I spend a lot of time correcting other people’s code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their intention. For example, in th CSS reset script I recommend, the reset sets background-repeat: no-repeat;. When this reset value is included, if a coder writes background: url(myImg.gif); the background-repeat value gets reset to the default value of repeat — repeating along the x and y axis — which is almost never the intended value. Note that none of the background properties are inherited by default, though several do have “inherited” as a value option. See below for more information on the background shorthand.

    default IE6 IE7 IE8 IE9 IE10 FF 3.6 FF 4 FF 5 Safari Chrome Opera
    background-attachement CSS2.1 Χ Χ
    fixed   Χ Χ
    scroll default
    local CSS3 Χ Χ Χ Χ 5
    background-color CSS2.1 Δ Δ Δ
    transparent default Δ
    rgb(r, g, b)  
    rgba(r, g, b, a) CSS3 Χ Χ Χ
    hsla() CSS3 Χ Χ Χ
    140+ named colors
    none default     1 1 1 1
    url, url CSS3 Χ Χ Χ 3.6
    left/top default
    center default when only one declaration
    CSS3 Χ Χ Χ 3.6
    4 Values
    CSS3 Χ Χ Χ Χ Χ Χ Χ Χ Χ Χ
    background-position-x not in the spec Χ Χ Χ Χ
    background-position-y not in the spec Χ Χ Χ Χ
    repeat-x / repeat-y
    multiple images Χ Χ Χ
    space Χ Χ Χ Χ Χ Χ
    round Χ Χ Χ Χ Χ Χ
    x / y values separate Χ Χ Χ Χ Χ Χ
    background-clip CSS3 Χ Χ Χ Δ -webkit-
    border-box Χ Χ Χ Δ
    padding-box Χ Χ Δ
    content-box Χ Χ Χ Δ
    background-origin CSS3 Χ Χ Χ Δ
    border-box Χ Χ Δ
    padding-box default Χ Χ Δ
    content-box Χ Χ Χ Δ
    background-size CSS3 Χ Χ Χ -moz-
    auto default -moz-
    contain Χ Χ Χ -moz-
    cover Χ Χ Χ -moz-
    (length) Χ Χ Χ -moz-


    The background-attachment attributes sets whether the background-image scrolls with the the document or remains fixed at the same location within the viewport. For example, if you include a “fixed” background image in a div, as the div scrolls up the page, the background image will stay in the same spot relative to the viewport, and will exit off the bottom edge of the div, disappearing from view, as the div moves up the screen. The default value is scroll. IE6 is the only browser that fails to support it correctly.

    Property Values for background-attachment

    background-attachment: fixed | scroll  | local;

    Browser support for background-attachment

    Explorer 6
    Explorer 7
    Explorer 8
    Internet Explorer 9 Firefox Opera Chrome Safari
    fixed behaves as “scroll” behaves as “scroll” works, but the placement of the image is off.
    scroll behaves as “local” behaves as “local”
    local Works because it inherits scroll, which erroneously renders as local. Works because it inherits scroll, which erroneously renders as local. 10.5 5


    In elements with background images that are background-attachment:fixed; the position of the fixed image is relative to the viewport (the browser), not the element that it is in. In other words, if you declare a fixed background image, the image is positioned relative to the document window rather than relative to the element. Because of this, as you scroll thru the page, and your element with the background image that is fixed moves thru the viewport, the background image will come into view as it passes over the location of the otherwise hidden background image.

    Note: background-attachment: local is a new value added in CSS3. “Local” is basically how “scroll” has been acting on scrolling elements in IE6 and IE7. An example is a div with "overflow: scroll.” Generally, as you scroll thru to div, the background image stays exactly where it was initially in the scrolling div’s viewport. Using local, the div’s background image scrolls with the element’s content. In the case of ’scroll’, the background does not scroll with the element’s content, except in non-compliant IE6 and IE7. In the case of ‘local’, the background scrolls along with the element’s content.

    Mobile Note: Mobile webkit does support fixed, but it doesn’t behave as you might expect. Smart phones show websites thru a viewport, displaying just a portion of the webpage. As you scroll, you are moving the viewport, not the actual page. So, the fixed background image is doing what it should, but it doesn’t look like you would expect.


    • IE8 does suppord fixed and not local, but get’s the positioning of the background image wrong.
    • IE6 and IE7 mistakingly renders fixed as scroll and scroll as local. Since scroll is the default, scroll renders as local, and the browser ignores the keyterm local, you can actually use local in these browsers as it will render local correctly.




    The background-color property sets the background color of the element. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif, transparent PNG, or gradient with transparency,, the declared background color will show thru the transparent pixels.

    All browsers support background colors.

    The default value is “transparent”. In using RGB instead of Hex values, you can either use integer range 0 – 255 or percent values of 0-100%. If you go over (for example, 300 or 110%), the browsers will reduce the value to the maximum allowable value (either 255 or 100%).

    Note that if you mix RGB between integer and percents, some browsers will fail. If you include the wrong number of characters in a hex value, some browsers will ignore the declaration. If you misspell a named color, the browser will ignore the declaration.

    CSS3 provided us with new colors. Any valid value for color is valid for the value of background-color. For example, you can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. test page

    Property Values for background-color

    background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456 | magenta;

    Browser support for background-attachment

    IE6 IE 7 IE 8 IE 9 IE10 FireFox Safari Chrome Opera
    rgb(r, g, b) Renders with mixed values Renders with mixed values
    rgba(r, g, b, a) ignores the entire call ignores the entire call ignores the entire call  
    hsl(h, s, l) ignores the entire call ignores the entire call ignores the entire call  
    hsla(h, s, l, a) ignores the entire call ignores the entire call ignores the entire call  
    named colors didn’t test      


    • Do not using mixed values (percents and integers) in RGB. This is against the specifications, and will fail in all modern browsers.
    • IE6 and IE7 get “partially compliant” for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications. test page
    • Do not use RGBA without browser targeting: color will fail in non-supporting browsers.
    • Bug: IE6 sometimes completely chokes on background-color: transparent. For example, if you declare background-color: transparent on pop-out in a suckerfish menu, the links in that menu will not be clickable and it will display as black.
    • Named colors have been expanded to include many new colors. Check out my list of named, hsl, hex and rgb colors.




    The background-image property allows us to define none, one or more background images for an element. This property only declares what image or gradient, if any, should be used. Other properties on this page can be used to define the position, movement, size, etc., or your declared images.

    In CSS3, an element can have multiple background images or layers. Separate each layer/image background image with a comma. When more than one image/layer/gradient is defined, the last image is drawn below all other layers and the first one is drawn on top, with each layer displayed in front to back order in between.

    Note that background images are not limited to jpegs, gifs and pngs. Browsers support data URIS, and (almost) all supporting gradients and some are supporting inline SVG.

    Property Values for background-image

    background-image: inherit | none | url(relative to CSS) | [gradients];
    background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

    Browser support for background-image

    IE 6 IE 7 IE 8 IE 9 IE 10 FireFox Safari Chrome


    inherit if url doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit      
    url needs to have adequate size to work IE7 zoom function does not increase the size of background images IE7 zoom function does not increase the size of background images      
    url, url 3.6     10.5
    gradient -ms- -moz- -webkit- -webkit


    background-image browser bugs

    IE6 has several bugs with background images that are worth noting.

    1. The area of an element with a background-image must be at least 2500 pixels, or the image may not display. Fix by giving area or hasLayout=true.
    2. The repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
    3. For background images on links, IE6 fetches the image from the server for every “hover”, causing flickering.
    4. IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
    5. If the background-image of a link is a transparent PNG, the link will not work in IE6.
    6. Using background images on <li>, <dd> and <dt> the background image may not render, especially if the list is placed within a floated, relatively-positioned parent.

    IE7 and IE8 has bugs too:

    1. The IE7 zoom function does not increase the size of background images.
    2. Same as IE6, in IE7 and IE8 the repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.


    Browsers are beginning to support gradients as background image values. See my CSS Gradients Library and Library of World Flags in CSS Gradients as examples. The syntax differs in Safari 5 (and slightly in FF 3.6) from the standard, and all browsers that support gradients support gradients only as a prefixed value.

    I’ll be posting a tutorial on gradients shortly, so am not including details here.

    SVG as Background image

    There are two ways to include SVG as background images. Either point to an svg file as you would to any jpg file: Old Example of SVG as bgimage

    or you can include the SVG directly in the background image call.

       <svg xmlns='http://www.w3.org/2000/svg'>
       <linearGradient id='gradient'>
       <stop offset='1%' stop-color='#F00'/>
       <stop offset='90%' stop-color='#C33'/>
       <rect fill='url(#gradient)' x='0' y='0' 
       		width='100%' height='100%'/>
       </svg>"); }

    Note that spacing was added for legibility. All spacing must be removed for SVG to work. example of svg as background URI




    In CSS2.1 background position takes two: left and top (in that order!) of the background image. If you only declare one attribute, the outcome depends on the type of value used (percent, measurement or keyword). The default value is “top left”, well, actually, “0 0″.

    NOTE: If you are using anything other than the keyterms, make sure the order is LEFT and TOP in that order.

    Property Values for background-position

    background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;
    background-position: 0 0, 50% 50%, 100% 100%; /* multiple placements */

    In CSS3 we can have up to 4 values for a single image’s background-position!!!

    If only one value is specified, the second value is assumed to be ‘center’. For example, background-position: bottom; will position the image centered at the bottom of the element. When using lengths instead of keyterms, the value refers to the horizontal positioning, so background-position: -20px; will position the background image centered veritally, with 20px of the background image being cut off the left hand side of the element.

    If two values are given and they’re not both keywords, the first value represents the horizontal position and the second represents the vertical position as an offselt from the top left corner of the element (background origin determines is its the top left corner of the outside of the border, inside of the border or inside the padding.

    New to CSS3, we can include three or four values for background-position, enabling us to position a background image relative to the bottom right of the element.

    Let’s start by explaining the four value property value, since the 3-value value is insanely confusing. The default of background-position is to offset your background image from the top left corner. Use four values to set your own offset corner. the syntax with an example:

    background-position: [bottom | center  | left | right ][length][bottom | center  | left | right ][length];
    background-position: bottom 40px right 20px;

    Pick one side, then list the offset from that edge, then include a perpendicular side and the offset from that second edge.In our example, the background image will be positioned 40px from the bottom and 20px from the right toward the bottom right of our element.


    If three values are given, 2 values must be keyterms and the missing offset is assumed to be zero. Currently only Opera supports 3 and 4 value background position. And, if you get any part of the syntax wrong (like try to offset from center which is not allowed), the entire declaration will be ignored. Because the 3-value syntax is confusing and prone to error, I recommend defining the 4 value whenever offsetting from any corner other than the top left corner. JS Fiddle Example

    Browser support for background-position

    IE 6 IE7 IE 8 IE 9 !E 10 Firefox Opera Chrome Safari iPhone
    mulitple     since 3.6 10.5
    4-value offset 11

    Note that background position with percent values can be confusing! A background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.

    • For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.
    • For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.
    • For 50%, the middle of the image will be placed in the center of the element.

    Any other percentage value is a bit more confusing:

    A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.

    Because of this, know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) when creating liquid layouts. If you have a content area that is 80% of the viewport, to put a faux column background image for a 25% width column, create a background image with a ratio of 1:3 that is wide enough to cover a wide scree browser., and place the background-position-x: 20%; (80% * 25% = 20%).




    Although not part of the W3C specifications, backgroundPositionX and backgroundPositionY are part of the DOM and supported by some browsers. Colors are different in the following table, since green means the browser follows the W3C specifications and red means it fails, and these values are not in the specifications.. This property was added by MS for IE5.5, made it into the CSS3 specifications for a while, but was removed in 2009. Test case


    Property Values for background-position-x

    background-position-x: center | inherit | left | right | px/em | %;

    Browser support for background-position-x

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Chrome Safari Opera
    % Supported Supported Supported Supported Supported Supported
    px (length) Supported Supported Supported Supported Supported Supported
    left / center /right Supported Supported Supported Supported Supported Supported




    Property Values for background-position-y

    background-position: bottom | center | inherit | top | 10px | 2em | 50%;

    Browser support for background-position-y

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Chrome Safari Opera
    % Supported Supported Supported Supported Supported Supported
    px (length) Supported Supported Supported Supported Supported Supported
    left / center /right Supported Supported Supported Supported Supported Supported




    The backround-repeat property specifies whether the background image is repeated or tiled. And, if so, how that image is tiled. The default value is repeat, which repeats the image along both the x and y axis. Since this is generally NOT the effect I go for, i include background-repeat: no-repeat in my CSS reset.

    There are two new values for background-repeat: space and round. Space means the image is repeated as many times as can fully fit, separated by white space if repeating does not create an exact fit. Round means the image is repeated as often as will fit. If it doesn’t fit a whole number of times, the background images are rescaled so they do.

    You can also declare different values for the x and y axis. While this new feature is in the specifications, it is not supported yet in Firefox.


    Property Values for background-repeat

    background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
    IE 6 IE 7 IE 8 IE 9 IE 10 Firefox Chrome Safari Opera
    repeat-x / repeat-y
    multiple comma separated values
    separate x/y values




    With possible values of border-box | padding-box, the background-clip property determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference. The default value is “border”, which is the effective default of all current browsers. Firefox 3 supports -moz-background-clip. Safari’s implementation is -webkit-background-clip.
    Supporting browsers also support content-box, which is not in the CSS3 specifications at this time. Border box is the default. Webkit uses both -webkit-border and -webkit-border-box. Firefox uses -moz-background-clip, and does not include the term ‘box’ in the value. The syntax may change.

    Property Values for background-clip

    background-clip: [border-box | padding-box ] [ , [border-box | padding-box ] ]* ;
    -moz-background-clip: border;
    -webkit-background-clip: border-box;

    Browser support for background-clip

    IE 6 IE 7 IE 8 IE9 IE 10 Firefox 3.6 Firefox 4 Chrome Safari 4/5 Opera
    border-box     -moz-: border   -webkit- -webkit-
    padding-box     -moz-: padding   -webkit- -webkit-
    content-box         -webkit- -webkit-


    IE 7 (in yellow) behaves like background-clip:padding if overflow property is set to hidden, auto or scroll.

    FF 3.6 is both prefixed, and supports values of border and padding (not border-box | padding-box)

    Safari 4 is both prefixed, and supports values of border, padding and content (not border-box | padding-box | content-box)




    The background-origin property determines how the ‘background-position’ is calculated. Takes one or two parameters: border-box | padding-box | content-box. With a value of ‘padding-box’, the position is relative to the padding edge (‘0 0′ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner). ‘Border-box’ means the position is relative to the border edge, and ‘content-box’ means relative to the content edge.

    Each comma-separated value applies to one image of ‘background-image’. This is useful only in safari at this point… but haven’t tested to see if supported. Safari’s current implementation is -webkit-background-origin. Mozilla is supporting -moz-background-origin. Has no impact when background attachement is set to fixed.

    Unlike clip, the value of content-box is in the proposed specifications.

    Note that the spec has changed. Mozilla and webkit have support, but use the original value terms of border | padding | content instead of the currect proposed specifications border-box | padding-box | content-box.

    Property Values for background-origin

    background-origin: [border-box | padding-box | content-box ] [ , [border-box | padding-box  | content-box] ]* ;
    -moz-background-origin: border; /* does not yet support multiple images, so no support for multiple values */
    -webkit-background-origin: border-box, padding-box, border-box;

    Browser support for background-origin

    IE 6 IE 7 IE 8 IE9 IE 10 Firefox 3.6
    Firefox 4 Safari 3
    Safari 4 Safari 5 Chrome Opera
    border-box     border   border -webkit-      
    padding-box     padding   padding -webkit-      
    content-box     content   content -webkit-      

    Sandbox: Background-clip in action




    Supported by Opera, Safari and Chrome, and Firefox , the background-size property specifies the size of the background images. The ‘contain’ values scales the image, while preserving its aspect ratio (if any), which may leave uncovered space. The ‘cover’ scales the image so that it covers the whole area, completely covering the element, but perhaps not showing part of the image if the element and the image did not have the same aspect ratio.
    see background-size specifications at the W3C

    Note that you still need to use the -moz- prefix if you’re supporting FF3.6 and the -webkit- prefix if for some unexplainable reason you’re still supporting Safari 4.

    Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox 3.6 Firefox 4 Chrome Safari Opera
    auto -moz-
    contain -moz-
    cover -moz-
    (length) -moz-



    The background shorthand.

    The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. Before CSS3, the values could be in any order, but were generally in the color, image, attachment, position and repeat order. If an attribute value is not specified, the value gets reset to the default value, which is why I recommend against using the shorthand.

    If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values listed below:


    	background-color: transparent;
    	background-position: 0% 0%;
    	background-size: auto auto;
    	background-repeat: repeat repeat;
    	background-clip: border-box;
    	background-origin: padding-box;
    	background-attachment: scroll;
    	background-image: none

    If you are declaring several background images using the shorthand property, the background color, if declared, should be declared as part of the shorthand of the final image only.

    Since they have the same value syntaz, if one <box> value is declared, then both the ‘background-origin’ and ‘background-clip’ are set to that value. If two values are present, then the first sets ‘background-origin’ and the second defines the ‘background-clip’ property.

    Property Values and order for the background shorthand

    background: background-image | background-position / background-size | background-repeat  | background-attachment | backgroun-origin | background-clip | background-color 
    background: url(myImg.jpg) bottom 20px right 20px / 200px 100px no-repeat fixed red;
    background: url(myImg.gif) 0 0 /  200px 100px no-repeat fixed border-box padding-box blue;  /*in action*/

    Default Values for background when values aren’t explicitly declared

    Property IE 6 IE 7 IE 8 IE 9 Firefox Safari Chrome Opera
    background-color transparent transparent transparent transparent transparent transparent transparent transparent
    background-image none none none none none none none none
    background-attachment “local” “local” scroll scroll scroll scroll scroll scroll
    background-position 0 0 0 0 0 0 0 0
    background-repeat repeat repeat repeat repeat repeat repeat repeat repeat
    background-size       auto auto auto auto auto
    background-clip       border-box border-box border-box border-box border-box
    background-origin       padding-box padding-box padding-box padding-box padding-box




    Mozilla only, pecifies how the coordinate system for the background-position of an inline element is chosen when the content of the inline element wraps onto multiple lines. -moz-background-inline-policy values include bounding-box | continuous | each-box, with a default of continuous. Property has no effect when background-attachment is fixed.

    Making IE recognize HTML5 elements

    IE6, IE7 and IE8 don’t recognize the HTML elements. This causes a major problem when you’re using the HTML5 elements, such as ‘aside’, as part of (or your complete) selector in your CSS. Add this snippet either in your HTML or as a condionally included file, and IE will be able to handle your HTML5 elements as selectors in your CSS, and as members of your DOM in javascript. (thanks to John Resig for the inspiration)

    <!--[if IE]>
    <script type="text/javascript">
    var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
    for(var i = 0; i < html5elmeents.length; i++){

    Printing HTML5 in Internet Explorer: where HTML5 is not supported

    The code snipped above does wonders for enabling the various Internet Explorer’s to understand HTML5 elements as element selectors for scressn media, it does nothing to enable print CSS. The above javascript doesn’t cure the ‘print’ issue. Jonathan Neal has come up with a javascript solution to the IE HTML5 print issue.

    IE Print Protector is a javascript file that allows you to print HTML5 pages in Internet Explorer, helping IE render HTML5 elements correctly, both on screen and in print.

    iPhone: HTML, CSS & JS Support

    See Estelle at the 2nd annual CSS Summit
    Wouldn’t it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that! When developing for mobile devices using webkit browsers we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.

    In my CSS Summit session we’ll use some CSS3 features learned in earlier sessions to create a native looking iPhone web app. We’ll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don’t have to wait any longer to use CSS3! Join Us!

    Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

    iPhone Support for CSS3 Selectors

    All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

    • *
    • E
    • .class
    • #id
    • E F
    • E > F
    • E + F
    • E[attribute]
    • E[attribute=value]
    • E[attribute~=value]
    • E[attribute|=value]
    • :first-child
    • :link
    • :visited
    • :lang()
    • :before
    • ::before
    • :after
    • ::after
    • :first-letter
    • ::first-letter
    • :first-line
    • ::first-line
    • E[attribute^=value]
    • E[attribute$=value]
    • E[attribute*=value]
    • E ~ F
    • :root
    • :last-child
    • :only-child
    • :nth-child()
    • :nth-last-child()
    • :first-of-type
    • :last-of-type
    • :only-of-type
    • :nth-of-type()
    • :nth-last-of-type()
    • :empty
    • :not()
    • :target
    • :enabled
    • :disabled
    • :checked
    • see them all

    iPhone Support for CSS3 properties

    Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

    Some CSS3 including the following, which will be discussed in future blog posts.

    • hsl(), rgba(), hsla() color support
    • native rounded corners (-webkit-border-radius)
    • IE box model (-webkit-box-sizing)
    • Shadows on text (text-shadow was in CSS2.0)
    • Shadows on elements (-webkit-box-shadow)
    • multiple background images
    • opacity /gradient transparency
    • @font-face web fonts
    • CSS Animation
    • Media Queries
    • namespaces

    iPhone & Safari Support for HTML elements, including HTML5

    includes HTML attributes for the iPhone and Safari

    Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

    <ELEMENT> Element Name Safari
    iPhone Support Attributes (and Notes in italic)
    Elements occuring outside the body element
    <!DOCTYPE> Document Type Declaration 1.0 1.0
    <html> html 1.0 1.0 manifest (Saf. 4, iphone 2.2)
    <head> document head 1.0 1.0 profile
    <base /> url base for links 1.0 1.0 href, target
    <link /> link 1.0 1.0 charset, href, media, rel, rev, target
    <meta /> meta 1.0 1.0 content, name, http-equiv, scheme
    <style> style 1.0 1.0 media, type
    <script> script 1.0 1.0 charset, defer, language, src, type
    <title> document title 1.0 1.0
    Elements Occuring in the <body> in HTML 4.01 and HTML5
    <body> document body 1.0 1.0 bgproperties (value: fixed)
    <a> Anchor 1.0 1.0 different event handlers for iPhone than Safari
    accesskey, charset, href (required), hreflang, rel, rev, shape (rect/cirlce/poly), target (deprecated, but useful), type
    <abbr> Abbreviation 1.0 1.0 title shows on hover in Safari
    <acronym> acronym 1.0 1.0 title shows on hover in Safari
    <address> address 1.0 1.0 italic
    <area> image map area 1.0 1.0 accesskey, alt (required), coords, href (required), hreflang, shape (rect/cirlce/poly), target
    <article> HTML5
    <aside> HTML5
    <audio> audio 3.1 3.0 HTML5: Similar to object, can nest sources and content to cascade until supported found.
    Audio support includes AAC, M4A, MP3, Wave, AIFF , Apple Lossless, Quicktime, but not OGG;

    autoplay, controls, end, loopend, loopstart, playcount, src, start
    <bdo> bi-directional override 1.0 1.0
    <blockquote> long quote 1.0 1.0 cite
    <br> break return or forced line break 1.0 1.0
    <button> push button 1.0 1.0 accesskey, disabled, type, value
    <canvas> canvas drawing region 1.3 1.0 HTML5: Stroke and fill colors, rgba/hsla colors, paths, rectangles, shadows, gradients, patterns, translations, rotation and scale
    <caption> caption 1.0 1.0
    <cite> citation 1.0 1.0
    <code> code 1.0 1.0
    <col /> column 1.0 1.0 char, charoff, span
    <colgroup> column group 1.0 1.0 char, charoff, span
    <dd> definition description 1.0 1.0
    <del> delete 1.0 1.0 datetime
    <dfn> definition 1.0 1.0
    <div> generic block element 1.0 1.0 aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4.0)
    <dl> definition list 1.0 1.0
    <dt> definition term 1.0 1.0
    <em> emphasized text 1.0 1.0
    <fieldset> field set 1.0 1.0
    <figure> HTML5
    <footer> HTML5
    <form> form 1.0 1.0 accept, accept-charset, action, enctype. method, target
    <frame /> frame 1.0 1.0 frameborder, longdesc, marginheight, marginwidth, noresize, scrolling (yes/no/auto), src
    <frameset> frameset 1.0 1.0 cols, rows
    <h1-6> headers 1.0 1.0
    <header> HTML5
    <hgroup> HTML5
    <hr /> horizontal rule 1.0 1.0
    <iframe> internal frame 1.0 1.0 frameborder, longdesc, marginheight, marginwidth, scrolling (yes/no/auto), src
    <img /> image 1.0 1.0 alt (required), composite, ismap, longdesc, src, usemap
    <input /> input 1.0 1.0 accept, accesskey, alt, autocapitalize (iphone 1.1, values: on/off), autocomplete, autocorrect (iphone 1.1, values: on/off), autosave (safari), checked, disabled, incremental (safari), ismap, max, maxlength, min, placeholder, results, src, type, usemap, value
    <ins> Insert 1.0 1.0 datetime
    <kbd> keyboard 1.0 1.0
    <keygen> key generation 1.0 1.0 challenge, keytype
    <label> label 1.0 1.0 accesskey, for
    <legend> caption for fieldset 1.0 1.0 accesskey
    <li> list item 1.0 1.0 type, value
    <map> image map 1.0 1.0
    <mark> HTML5
    <meter> HTML5
    <object> object 1.0 1.0 archive, classid, codetype, data, declare, loop, type, usemap
    <ol> ordered list 1.0 1.0 type
    <optgroup> option group 1.0 1.0 disabled, label
    <option> option 1.0 1.0 disabled, label, selected, value
    <p> paragraph 1.0 1.0
    <param> parameter 1.0 1.0 type, value, valuetype
    <pre> preformatted text 1.0 1.0
    <progress> HTML5
    <q> inline quotation 1.0 1.0 cite
    <samp> sample computer code 1.0 1.0
    <select> option selector 1.0 1.0 disabled, multiple
    <source> 3.1 HTML5
    <span> span (generic non-semantic container) 1.0 1.0 aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4)
    <strong> strong emphasized text 1.0 1.0
    <sub> subscript 1.0 1.0
    <sup> superscript 1.0 1.0
    <table> data table 1.0 1.0 frame (values: above, below, hsides, vsides, rhs, lhs, box, border), rules (values: none, groups, rows, cols, and all), summary
    <tbody> table body 1.0 1.0 char, charoff
    <td> table data cell 1.0 1.0 abbr, axis, char, charoff, colspan, headers, rowspan, scope
    <textarea> text area 1.0 1.0 accesskey, cols, disabled, readonly, rows, wrap
    <time> HTML5
    <tfoot> table footer 1.0 1.0 char, charoff
    <th> table header cell 1.0 1.0 abbr, axis, char, charoff, colspan, headers, rowspan, scope
    <thead> table head 1.0 1.0 char, charoff
    <tr> table row 1.0 1.0 char, charoff
    <ul> unordered list 1.0 1.0
    <var> variable 1.0 1.0
    <video> video 3.1 3.0 HTML5
    autoplay, controls, end, loopend, loopstart, playcount, poster, src, start
    Elements you should not be using, that are still valid
    <tt> teletype 1.0 1.0
    <i> italic
    <b> bold
    <big> big font
    <small> small font
    <noframes> no frames 1.0 1.0
    <noscript> no script 1.0 1.0
    Elements that are deprecated or were never in a W3C spec, but you may still see on older websites
    <applet> applet 1.0
    <center> center 1.0 1.0
    <dir> direction 1.0 1.0
    <embed> embed 1.0 1.0 use object instead
    hidden, loop, pluginpage, pluginspage, pluginurl
    <font> font 1.0 1.0
    <layer> layer 1.0 1.0
    <listing> listing 3.0 1.0 use <pre> instead. from HTML 3.2
    <marquee> ,arquee 1.0 1.0 behavior, direction, loop, scrollamount, scrolldelay, truespeed
    <menu> menu 1.0 1.0
    <nobr> no break 1.0 1.0
    <noembed> no embed 1.0 1.0
    <nolayer> no layer 1.0 1.0
    <plaintext> plaintext 1.0 1.0
    <strike> strikethrough 1.0 1.0 use <del>
    <u> underline
    <wbr> with breaks 1.0 1.0
    <xmp> sequence of literal characters 1.o 1.0

    Safari and iPhone Event Handlers:

    Event Safari iPhone Explanation
    onabort 1.0 1.0 When an image element is aborted during load. (for <img /> elements)
    onbeforecopy 1.3 before the element is copied.
    onbeforecut 1.3 before the element is cut.
    onbeforepaste 1.3 before the element has something pasted into it.
    onbeforeunload 1.3 before the element is unloaded from the page.
    onblur 1.0 1.0 when the element loses focus.
    onchange 1.0 1.0 when the element changes its value.
    onclick 1.0 1.0 when the element is clicked.
    oncontextmenu 1.1 when the element is right-clicked or when the mouse button is held down long enough to generate a contextual menu.
    oncopy 1.3 when the element is copied.
    oncut 1.3 when the element is cut.
    ondblclick 1.0 when the element is double-clicked.
    ondrag 1.3 when the element is dragged.
    ondragend 1.3 when the element is done being dragged.
    ondragenter 1.3 when a drag has entered the element.
    ondragleave 1.3 when a drag has left the element.
    ondragover 1.3 when a drag is over the element.
    ondragstart 1.3 when the element has started to be dragged.
    ondrop 1.3 when the element is dropped.
    onerror 1.0 1.0 when the element has an error in loading.
    onfocus 1.0 1.0 when the element gets focus.
    ongesturechange 2.0 When fingers are moved during a gesture.


    ongestureend 2.0 When the gesture ends (when there are 1 or 0 fingers touching the surface).


    ongesturestart 2.0 When two or more fingers touch the surface.


    oninput 1.3 1.0 when text is entered into the element.
    onkeydown 1.0 1.0 when a key is pressed over the element.
    onkeypress 1.0 1.0 when a key is pressed and released over the element.
    onkeyup 1.0 1.0 when a key is released over the element.
    onload 1.0 1.0 when the element finishes loading.
    onmousedown 1.0 1.0 when the mouse button is pressed over the element.
    onmousemove 1.0 1.0 when a key is moved within the element.
    onmouseout 1.0 1.0 when the mouse leaves the element.
    onmouseover 1.0 1.0 when the mouse is over the element.
    onmouseup 1.0 1.0 when the mouse button is released over the element.
    onmousewheel 1.0 1.0 when the mouse wheel button is rotated.
    onorientationchange 1.1 When the orientation of the device changes.
    onpaste 1.3 when the element is pasted.
    onreset 1.0 1.0 when the form element is reset.
    onresize 1.0 1.0 when the element is resized.
    onscroll 1.2 1.0 when the element is scrolled (a text box would use this, for example).
    onsearch 1.3 when a search is performed.


    onselect 1.0 1.0 when text within the element is selected.
    onselectstart 1.3 when the element begins to be selected. You can use this to prevent selections.
    onsubmit 1.0 1.0 when the form element is submitted.
    ontouchcancel 2.0 When the system cancels tracking for the touch.


    ontouchend 2.0 When a given event lifts from the surface.


    ontouchmove 2.0 When a finger for a given event moves on the surface.


    ontouchstart 2.0 When a finger for a given event touches the surface.


    onunload 2.1 when the element is unloaded from the page.

    Other iPhone posts in my blog

    IE8: What you need to know

    IE8 CSS Support and Rendering Mode, IE8 debugging, etc.

    IE8 and CSS

    IE8 came out today. I appended the CSS selector browser support blog post to include IE8 CSS Selector support and IE7 compliance mode CSS Selector support. Most notable is that IE8 Supports all of CSS2.1 and passes the Acid 2 test.

    IE8 compliance mode / preventing IE7 rendering in the IE8 browser

    Important to know is that IE8 has a button that allows users to render your page in IE7. If that button is clicked enough, your page will always render in IE7 for everyone (not just those who clicked the button). So, do you have to test your pages in IE8 in IE7 mode? No, you don’t. To ensure that your page is not rendered in IE7 mode inside the IE8 browser add the following meta tag to your pages:

    <meta http-equiv="X-UA-Compatible" content="IE=8" />

    Alternatively, if you want your pages to render in IE7 mode you can write: <meta http-equiv="X-UA-Compatible" content="IE=7" />. The issue with this is that IE7 rendering in IE8 is not identical to plain IE7. So, I recommend against using this meta tag.

    So, to ensure that you DON’T have to test in IE7, IE8 and IE8 in IE7 mode, add the code above.

    To learn more about what IE8 supports, check out IE8 CSS Selector support.

    IE8 bugs

    IE8 JavaScript Bug: Apparently IE8 doesn’t much care for prototype and prototip. I think it’s an issue with className that causes IE8 to choke. In the meantime, if you are using Ruby on Rails, then you’re probably using prototype.js. And, if you’re using prototype.js, then IE8 chokes, so you have to use the meta tag. And, if you use the
    <meta http-equiv="X-UA-Compatible" content="IE=7" /> tag, make sure it’s the FIRST thing on your page, because IE8 suck ass, just like IE7 and IE6.

    If you’re more of an ASP.net fan (which I am NOT!), there is another issue with menus not showing. Mark Hidreth explains it in his blog., but in short, the solution is to add a z-index of greater than zero to <asp:Menu>. Thanks to Attiq Jafar for alerting me to this bug and solution.

    IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

    Differences between IE7 compatibility mode and IE8

    These are just a few differences that I have found so far. Please do NOT consider this an exhaustive list

    1. default padding on <p> is not equal
    2. table { border-collapse: collapse;} is NOT rendered the same. If dashed, IE8 is properly dotted or dashed, whereas IE7 overlays the lines and it looks ugly, and otherwise does not collapse
    3. border bottoms on an inline element will not display in IE7 if the border is the lowest part of the page. The page will not grow to include the border, unless the bordered element is block. IE8 will grow.
    4. border: hidden; IE7 does NOT understand the value of hidden for the border property.
    5. border-style: outset The coloring is different for IE7 than IE8. IE7 is darker on the bottom/right. IE8 has the darker color on the top/left. Groove and
    6. RGB – IE7 displays RGB mixed number types: The spec states that values for RGB should be three integers or three percentages, but not a combo of the two. (IE7 and IE6 display mixed types. IE8 and standards compliant browsers dow not render colors with mixed value types.
    7. IE8 has support for content:, counter-increment: and counter-reset: IE7 doesn’t!
    8. Empty declarations overide in IE7, but not 8: IE7 will not show a property if there is a malformed declaration after the element. p { color:green; color: } – IE8 will show green. IE7 wont.
    9. Identifiers starting with a digit or non-letter character followed by a digit: Identifiers starting with dash-number choke IE7: If there is a series of classes or ids listed, including ones that start with a dash followed my an integer, IE7 will choke, and ignore all the selectors in the series. For example,
      .-3myClass, .blue {color: blue;}
      #-3myClass, .blue {color: blue;}
      .3myClass, .blue {color: blue;}
      #3myClass, .blue {color: blue;}

      The element with a class of blue will NOT inherit the blue from either of these declarations

    10. @import is not correctly supported in IE7: @import “support/import-coloroveride.css”; (see the one before it for comparison)
    11. border-width: thin appears to be 1px wide in IE8 and 2px wide in IE7
    12. clearing: if you clear an element in IE7 after a floated element, and the element has a margin top, that will be the space between it and the floated element. In IE8, the margin top will be the space between it and the last non-floated element.
    13. box model: Some people believe that IE got the box model right, and the w3c got the box model wrong. IE8 gets the box model right according to the w3c.

    IE8 CSS Hack

    This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

     p.myclass {    
         color: green;    
         *color: red; 
    body:last-child p.myclass {
         color: blue; 

    IE8 Developer Toolbar (or Firebug for IE8)

    IE8 comes with a developer toolbar. The developer toolbar is definitely more robust than what came with IE7. Similar to Firebug, you highlight an element, and can edit CSS on the fly, but the mechanism is less robust. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property, and you can indeed edit the value or property by clicking on the value or property. You can’t use the up/down arrows like in Firebug, and unlike Firebug, the change isn’t instant: you have to click out of the property to see the change. However, it is definitely an improvement on the previous dev toolbar.

    I should probably write a tutorial on this developer toolbar, but I really don’t care enough about this browser to put the effort in to it…. but maybe.