Standardista

CSS3, JavaScript and HTML5 explained

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)  
dashed  
dotted  
double  
groove   Δ Δ
hidden   Χ Χ
inset   Δ Δ
none
outset   Δ Δ
ridge Δ Δ
solid
border-width (details) Δ Δ
thin
medium  
thick  
length  
border (shorthand)   Δ Δ
border-collapse (details)   Δ Δ
collapse
separate
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

border-color

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
border-color
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

DOM

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

-moz-border-(side)-colors

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
border-top-colors                
border-right-colors                
border-bottom-colors                
border-left-colors                

border-style

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
border-style
dashed
dotted
double
groove Δ Δ
hidden Χ Χ
inset Δ Δ
none
outset Δ Δ
ridge Δ Δ
solid

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!

TIP:

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.

DOM

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

border-width

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 Δ Δ
thin
medium
thick
length

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.

TIP:

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;
    }

DOM

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

border

The border shorthand property is shorthand for both

border-width
border-color
border-style 

and

border-top:
border-right:
border-bottom:
border-left:

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 Δ Δ
border-top
border-right
border-bottom
border-left

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

IE6 IE7 IE8 IE9 IE10 FF Safari Chrome Opera
border-collapse Δ Δ
collapse
separate
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.

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

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.

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, 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%;

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.

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 Χ Χ Χ Χ Χ Χ Χ  
slice                

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.

box-shadow

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

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

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

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.

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

  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.

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

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.

border-image-width

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.

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 is not supported anywhere. If included, the entire declaration fails. The default is 0.

Property Values for border-image-outset

length{1,4}

Browser support for border-image-outset

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

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 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 Χ Χ Χ Χ Χ Χ Χ

Notes

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

8 Responses to “Border Properties, Values & Browser Support”

  1. Andy says:

    Best overview of CSS3 border properties I’ve seen. Thank you!

  2. Theo says:

    Agree with Andy, great job ! bookmarked,

    Thank you !

  3. Ric says:

    You might be interested to know that the border-radius in the IE9 preview calculates the rounding 1 pixel less than the moz and webkit versions.

    Now granted, 1 pixel isn’t a lot, especially when you are working with radii of over 5px, and there is the caveat that the moz and webkit versions are propriety implementations using their own prefix, but it is an annoying inconsistency none the less.

    For example, this image shows IE9, Mozilla and Chrome (in that order) rendering..

    http://i.imgur.com/TDbpM.png

    .. the CSS class was set to .. { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px } .. and you can see the IE9 (top one) has less of an arc.

    Will we see the need to have more CSS “hacks” just to get small borders rendering the same across the browsers.

    ps: I realise that border-radius is due for Opera, but at the time of writing this it’s only available for a beta/test build so I’ve not added that in the image.

  4. [...] – http://24ways.org/2009/going-nuts-with-css-transitions border properties for CSS3 – http://www.standardista.com/css3/css3-border-properties This entry was posted in Uncategorized. Bookmark the permalink. ← Week 9 LikeBe [...]

  5. [...] grids, columns, layouts or templates. I have a separate post for CSS3 Background Properties and CSS3 border properties. Those are all coming soon. Sorry for the slow download, but this table is over 8000 lines worth of [...]

  6. Stefano says:

    Hi, border-collapse doesn’t work on Safari or Chrome, it’s a real bummer :( It does work on Firefox though

Leave a Reply