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
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
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
/* 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
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
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