Standardista

The ,border property allows you to define the width, color and style of the border 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-width && border-color && border-style

Browser support for 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:

  .mySelector{
        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 *

DOM

document.getElementById("myID").style.border

border-collapse

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

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.

DOM

document.getElementById("myID").style.borderCollapse

border-spacing

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

Browser quirks in rendering border-spacing

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

DOM

document.getElementById("myID").style.borderSpacing

Finally! We finally get to CSS3 Properties. w00t!

border-radius

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, don't use the shorthand except for webkit! Save bytes, and confusion, but using the shorthand. Unfortunately, as of today, webkit only understands symmetrical values for the shorthand property. If you want your corners to be different widths, you have to use the long hand property with webkit. Also, the syntax FF uses is different, so instead of memorizing different syntax for different browsers, just use this shorthand.

In order for Firefox, Chrome and Safari to render the border radius, add "-moz-" in font of the property name for mozilla browsers and "-webkit-" for webkit browsers (Chrome & Safari). Opera supports border-radius without a prefix.

Note on percentages: The CSS3 spec states that 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. This is the way Safari and Opera handle it, but Mozilla the percentage is relative to the width of the box for both horizontal and vertical radii.

Property Values for border-radius

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

Browser support for border-radius

Browser quirks in rendering border-radius

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

• Webkit can only accept one value for the shorthand radius property: only one value will create rounded corners, two values will create elliptical corners
• Webkit does NOT understand percentages for radii values
• Firefox understands percentages for radii value, but uses only the width in determining the width (should use width and height)

• Firefox gets the syntax of the longhand properties wrong. Below are the longhand versions for webkit, mozilla and standard supporting browsers (Opera)

  
  /* shorthand values */
    -webkit-border-radius: 15px 10px 5px 20px;
    -moz-border-radius: 15px 10px 5px 20px;
     border-radius: 15px 10px 5px 20px;
   
  /* values for webkit, mozilla,  and standard (opera)*/
   
    /* webkit adds prefix, but otherwise syntactically correct */
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 20px;
   
    /* notice difference in Mozilla syntax */
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 20px;
   
     /* correct way */
     border-top-left-radius: 15px;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 20px;
  

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

Screen show of what the three examples on the left should look like

Elliptical (versus Rounded) Corners

When defining elliptical corners where all four sides are the same, the syntax for -webkit- does NOT include the slash, as required by the specifications. Actually, if you include the slash, webkit ignores the call altogether.

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

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;
-webkit-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 differs from the rest.

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

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

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

DOM

document.getElementById("myID").style.borderTopLeftRadius
document.getElementById("myID").style.borderTopRightRadius
document.getElementById("myID").style.borderBottomRightRadius
document.getElementById("myID").style.borderBottomLeftRadius

box-decoration-break

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.

Property Values for box-decoration-break

clone | slice

Browser support for box-decoration-break

as far as i can tell, no browsers support box-decoration-break, or even the no longer in the specifications border-break. 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.

box-shadow

The box-shadow property enables the developer to add drop shadows or inset shadows to 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.

The box-shadow property has been temporarily removed from the W3C spec, but will be put back in.

Property Values for box-shadow

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

What the box-shadow property values mean

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

The first value is the left offset of the shadow. A negative value will put the shadow on the left.

The second value is the top offset. A negative value will put the shadow above the box.

The third 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 value, in this case, is the color. 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 black than if you start with an opaque version of grey.

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

Browser quirks in rendering box-shadow

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

• Mozilla and Webkit browsers require browser specific prefixes
• Webkit doens't understand inset shadows.
• Webkit doens't understand the spread radius, so leave that out when you use the webkit prefix

DOM

document.getElementById("myID").style.boxShadow

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.

border-image

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:

border-top-image:
border-right-image:
border-bottom-image:
border-left-image:
border-corner-image:
border-top-left-image:
border-top-right-image:
border-bottom-left-image:
border-bottom-right-image:

and short for

border-image-source:
border-image-slice:
border-image-width:
border-image-outset:
border-image-repeat:

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

Browser quirks in rendering border-image

• IE6, IE7 and IE8 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.
• The syntax for Opera is different than for Webkit and Moz. Do not use the slash for opera.
• There is no 'none' property value in the specification for the shorthand. It's the default value for border-image-source.

border-image-source

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

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.

border-image-slice

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

Do not declare 'fill' as it will kill the rest of the rendering. However, it seems to be the default.

border-image-width

I have been trying to decipher the spec, which makes little sense. But, i can't. In the end, it appears that 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.

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

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 understand the border-image-width as part of the shorthand. Instead, declare the width with the border-width property. Opera will inherit it.

border-image-outset

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 seems to me that it is not supported in any browser I tested. The default is 0

Property Values for border-image-outset

length{1,4}

Browser support for border-image-outset

border-image-repeat

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 may or may not be in the spec. So far, it 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