CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper,
in speech, etc. This draft contains the features of CSS level 3
relating to borders and backgrounds. It includes and extends the
functionality of CSS level 2 [CSS21], which builds on CSS
level 1 [CSS1].
The main extensions compared to level 2 are borders consisting of
images, boxes with multiple backgrounds, boxes with rounded corners and
boxes with shadows.
This module replaces two earlier drafts: CSS3 Backgrounds and CSS3
Border.
Status of this document
This section describes the status of this document at the time of
its publication. Other documents may supersede this document. A list of
current W3C publications and the latest revision of this technical report
can be found in the W3C technical reports
index at http://www.w3.org/TR/.
A Candidate Recommendation is a document that has been widely reviewed
and is ready for implementation. W3C encourages everybody to implement
this specification and return comments to the (archived) public
mailing list [email protected] (see instructions). When sending
e-mail, please put the text “css3-background” in the subject,
preferably like this: “[css3-background]
…summary of comment…”
Publication as a Candidate Recommendation does not imply endorsement by
the W3C Membership. This is a draft document and may be updated, replaced
or obsoleted by other documents at any time. It is inappropriate to cite
this document as other than work in progress.
The following features are at-risk and may be dropped at the end of the
CR period if there has not been enough interest from implementers:
‘box-decoration-break’
The CSS WG maintains an issues list for
this module. A test suite
and implementation report for CSS Backgrounds and Borders Level 3 will be
developed during the Candidate Recommendation phase, which will last a
minimum of three months, i.e., at least until 15 May 2011. See the section
“CR exit criteria†for more details.
When elements are rendered according to the CSS box model[CSS21], each element
is either not displayed at all, or formatted as one or more rectangular
boxes. Each box has a rectangular content area, a band of padding around
the content, a border around the padding, and a margin outside the border.
(The margin may actually be negative, but margins have no influence on the
background and border.)
The various areas and edges of a typical box. (This
diagram is explained in the CSS2.1 Box Model chapter [CSS21].)
The properties of this module deal with the decoration of the border
area and with the background of the content, padding and border areas.
Additionally the box may be given a "drop-shadow" effect with the
‘box-shadow’ property.
If an element is broken into multiple boxes, ‘box-decoration-break’ defines how the
borders and background are divided over the various boxes. (An element can
result in more than one box if it is broken at the end of a line, at the
end of a column or at the end of a page; and continued in the next line,
column or page.)
The relative stacking order of backgrounds, borders, and shadows is
given in this module. For how these layers interact with other rendered
content, see Appendix E “Elaborate description of Stacking Contextsâ€
in [CSS21].
<color> values are defined in
CSS Color Level 3 [CSS3COLOR].
<image> values are defined by
this specification as <image> =
<uri>.
A future specification may expand the definition of <image> to allow other values,
e.g., to define image slices.
All other values are defined in CSS Level 2 Revision 1 [CSS21].
All properties defined in this specification also accept the inherit
keyword as their property value, but for readability it has not been
listed explicitly.
3. Background properties
Each box has a background layer that may be fully transparent (the
default), or filled with a color and/or one or more images. The background
properties specify what color (‘background-color’) and images (‘background-image’) to use, and how they
are sized, positioned, tiled, etc.
The background properties are not inherited, but the parent box's
background will shine through by default because of the initial
‘transparent’ value on ‘background-color’.
3.1. Layering multiple background
images
The background of a box can have multiple layers in CSS3. The number of layers is determined by the
number of comma-separated values in the ‘background-image’ property. Note that a
value of ‘none’ still creates a
layer.
Each of the images is sized, positioned, and tiled according to the
corresponding value in the other background properties. The lists are
matched up from the first value: excess values at the end are not used. If
a property doesn't have enough comma-separated values to match the number
of layers, the UA must calculate its used value by
repeating the list of values until there are enough.
For example, this set of declarations:
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;
has exactly the same effect as this set with the extra position dropped
and the missing values for ‘background-origin’ and ‘background-repeat’ filled in (emphasized
for clarity):
background-image: url(flower.png), url(ball.png), url(grass1.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;
The first image in the list is the layer closest to the user, the next
one is painted behind the first, and so on. The background color, if
present, is painted below all of the other layers.
Note that the border-image
properties can also define a background image, which, if present, is
painted on top of the background created by the background properties.
This property sets the background image(s) of an element. Images are
drawn with the first specified one on top (closest to the user) and each
subsequent image behind the previous one. Where
A value of ‘none’ counts as an image
layer but draws nothing. An image that is empty (zero width or zero
height), that fails to download, or that cannot be displayed (e.g.,
because it is not in a supported image format) likewise counts as a layer
but draws nothing.
When setting a background image, authors should also specify a ‘background-color’ that will preserve contrast
with the text for when the image is unavailable.
For accessibility reasons, authors should not use background images as
the sole method of conveying important information. See Web Content
Accessibility Guideline F3[WCAG20]. Images are not accessible
in non-graphical presentations, and background images specifically might
be turned off in high-contrast display modes.
Note that stylistic foreground images can be provided in CSS
with the content
property. (Semantically-important foreground images should be provided in
the document markup, e.g. with the <img> tag in HTML.)
Media fragments
can be used to display a portion of an image. The CSS Images module will
provide fallback syntax for image formats and include additional controls
for image display.
Some examples specifying background images:
body { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
Implementations may optimize by not downloading and drawing
images that are not visible (e.g., because they are behind other, fully
opaque images).
Single values for <repeat-style> have the
following meanings:
‘repeat-x’
Equivalent to ‘repeat no-repeat’.
‘repeat-y’
Equivalent to ‘no-repeat repeat’.
‘repeat’
Equivalent to ‘repeat repeat’.
‘space’
Equivalent to ‘space space’
‘round’
Equivalent to ‘round round’
‘no-repeat’
Equivalent to ‘no-repeat
no-repeat’
If a <repeat-style>
value has two keywords, the first one is for the horizontal direction, the
second for the vertical one, as follows:
‘repeat’
The image is repeated in this direction as often as needed to cover
the background painting area.
‘space’
The image is repeated as often as will fit within the background positioning area without
being clipped and then the images are spaced out to fill the area. The
first and last images touch the edges of the area. If the background
painting area is larger than the background positioning area, then
the pattern repeats to fill the background painting area. The value of
‘background-position’ for this direction
is ignored, unless there is not enough space for two copies of the image
in this direction, in which case only one image is placed and ‘background-position’ determines its
position in this direction.
‘round’
The image is repeated as often as will fit within the background positioning area. If it
doesn't fit a whole number of times, it is rescaled so that it does. See
the formula under ‘background-size’. If the background
painting area is larger than the background positioning area, then
the pattern repeats to fill the background painting area.
‘no-repeat’
The image is placed once and not repeated in this direction.
Unless one of the two keywords is ‘no-repeat’, the whole background painting area will
be tiled, i.e., not just one vertical strip and one horizontal strip.
Example(s):
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
The effect of ‘repeat-y’: One copy of the background image is
centered, and other copies are put above and below it to make a vertical
band behind the element.
Example(s):
body {
background-image: url(dot.png) white;
background-repeat: space
}
The effect of ‘space’: the image of a dot is tiled to cover
the whole background and the images are equally spaced.
If background images are specified, this property specifies whether they
are fixed with regard to the viewport
(‘fixed’) or scroll
along with the element (‘scroll’) or its contents (‘local’). The property's
value is given as a comma-separated list of <attachment> keywords
where
<attachment> = scroll | fixed | local
fixed
The background is fixed with regard to the viewport. In paged media
where there is no viewport, a ‘fixed’ background is fixed with respect to the
page box and
therefore replicated on every page. Note that there is
only one viewport per view. Even if an element has a scrolling mechanism
(see the ‘overflow’ property [CSS21]), a ‘fixed’ background doesn't
move with the element.
local
The background is fixed with regard to the element's contents: if the
element has a scrolling mechanism, the background scrolls with the
element's contents. In this case, the background behind the element's
border (if any) scrolls as well, even though the border itself does not
scroll with the contents. The UA may, however, treat the ‘border-box’ value of ‘background-clip’ as ‘padding-box’ in cases where ‘background-attachment’ is ‘local’ and the contents
of the element scroll.
scroll
The background is fixed with regard to the element itself and does not
scroll with its contents. (It is effectively attached to the element's
border.)
Even if the image is fixed, it is still only visible when it is in the
background painting area of the
element or otherwise unclipped. (See
“The backgrounds of special elements†for the cases when
background images are not clipped.) Thus, unless the image is tiled, it
may be invisible.
This example creates an infinite vertical band that remains “gluedâ€
to the viewport when the element is scrolled.
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
User agents that do not support ‘fixed’ backgrounds (for example due to
limitations of the hardware platform) should ignore declarations with the
keyword ‘fixed’.
For example:
body {
/* For all UAs: */
background: white url(paper.png) scroll;
/* For UAs that do fixed backgrounds: */
background: white url(ledger.png) fixed;
}
h1 {
/* For all UAs: */
background: silver;
/* For UAs that do fixed backgrounds: */
background: url(stripe.png) fixed, white url(ledger.png) fixed;
}
If one or two values are specified, for a <length> the
absolute length, otherwise a percentage. If three or four values are
specified, two pairs of a keyword plus a length or percentage.
If background images have been specified, this property specifies their
initial position (after any resizing)
within their corresponding background positioning area.
Where
<bg-position> = [
[ top | bottom ]
|
[ <percentage> | <length> | left | center | right ]
[ <percentage> | <length> | top | center | bottom ]?
|
[ center | [ left | right ] [ <percentage> | <length> ]? ] &&
[ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]
If only one value is specified, the second value is assumed to be
‘center’. If two values are given
and at least one value is not a keyword, then the first value represents
the horizontal position (or offset) and the second represents the vertical
position (or offset). <percentage> and
<length> values here represent an offset of the top left
corner of the background image from the top left corner of the background
positioning area.
If three or four values are given, then each
<percentage> or<length> represents an
offset and must be preceded by a keyword, which specifies from which edge
the offset is given. For example, ‘background-position: bottom 10px right 20px’
represents a ‘10px’ vertical offset up
from the bottom edge and a ‘20px’
horizontal offset leftward from the right edge. If three values are given,
the missing offset is assumed to be zero.
Positive values represent an offset inward from the edge of the
background positioning area. Negative values represent an offset
outward from the edge of the background positioning area.
The following declarations give the stated (horizontal, vertical)
offsets from the top left corner:
background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */
<percentage>
A percentage for the horizontal offset is relative to (width of
background positioning area - width of background
image). A percentage for the vertical offset is relative to
(height of background positioning area - height of
background image), where the size of the image is the size given
by ‘background-size’.
For example, with a value pair of ‘0%
0%’, the upper left corner of the image is aligned with
the upper left corner of, usually, the box's padding edge. A value pair
of ‘100% 100%’ places the lower
right corner of the image in the lower right corner of the area. With a
value pair of ‘75% 50%’, the point
75% across and 50% down the image is to be placed at the point 75%
across and 50% down the area.
Diagram of the meaning of ‘background-position: 75% 50%’.
<length>
A length value gives a fixed length as the offset. For example, with a
value pair of ‘2cm 1cm’, the upper
left corner of the image is placed 2cm to the right and 1cm below the
upper left corner of the background positioning area.
‘top’
Equivalent to ‘0%’ for the vertical
position if one or two values are given, otherwise specifies the top edge
as the origin for the next offset.
‘right’
Equivalent to ‘100%’ for the
horizontal position if one or two values are given, otherwise specifies
the right edge as the origin for the next offset.
‘bottom’
Equivalent to ‘100%’ for the
vertical position if one or two values are given, otherwise specifies the
bottom edge as the origin for the next offset.
‘left’
Equivalent to ‘0%’ for the
horizontal position if one or two values are given, otherwise specifies
the left edge as the origin for the next offset.
‘center’
Equivalent to ‘50%’ (‘left 50%’) for the horizontal position if the
horizontal position is not otherwise specified, or ‘50%’ (‘top
50%’) for the vertical position if it is.
The following ‘background’ shorthand declarations use
keywords to set ‘background-position’ to the stated
percentage values.
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
In the example below, the (single) image is placed in the lower-right
corner of the viewport.
Background positions can also be relative to other corners than the top
left. E.g., the following puts the background image 10px from the bottom
and 3em from the right:
For elements rendered as a single box, specifies the background positioning area. For
elements rendered as multiple boxes (e.g., inline boxes on several lines,
boxes on several pages) specifies which boxes ‘box-decoration-break’ operates on to
determine the background positioning area(s).
‘padding-box’
The position is relative to the padding box. (For single boxes
‘0 0’ is the upper left corner of the
padding edge, ‘100% 100%’ is the lower
right corner.)
Note that if ‘background-clip’ is ‘padding-box’, ‘background-origin’ is ‘border-box’, ‘background-position’ is ‘top left’ (the initial value), and the element has
a non-zero border, then the top and left of the background image will be
clipped.
Scale the image, while preserving its intrinsic aspect ratio (if any),
to the largest size such that both its width and its height can fit
inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio (if any),
to the smallest size such that both its width and its height can
completely cover the background positioning area.
[ <length> | <percentage> | auto ]{1,2}
The first value gives the width of the corresponding image, the second
value its height. If only one value is given the second is assumed to be
‘auto’.
A percentage is relative to the background positioning area.
An ‘auto’ value for one dimension
is resolved by using the image's intrinsic ratio and the size of the
other dimension, or failing that, using the image's intrinsic size, or
failing that, treating it as 100%.
If both values are ‘auto’ then the
intrinsic width and/or height of the image should be used, if
any.
If the image has neither an intrinsic width nor an intrinsic height, its
size is determined as for ‘contain’.
Negative values are not allowed.
Here are some examples. The first example stretches the background
image independently in both dimensions to completely cover the content
area:
The second example stretches the image so that exactly two copies fit
horizontally. The aspect ratio is preserved:
p {
background-image: url(tubes.png);
background-size: 50% auto;
background-origin: border-box }
This example forces the background image to be 15 by 15 pixels:
para {
background-size: 15px 15px;
background-image: url(tile.png)}
This example uses the image's intrinsic size. Note that this is the
only possible behavior in CSS level 1 and 2.
body {
background-size: auto; /* default */
background-image: url(flower.png) }
The following example rounds the height of the image to 33.3%, up from
the specified value of 30%. At 30%, three images would fit entirely and a
fourth only partially. After rounding, three images fit. The width of the
image is 20% of the background area width and is not rounded.
If ‘background-repeat’ is ‘round’ for one (or both) dimensions, there is a
second step. The UA must scale the image in that dimension (or both
dimensions) so that it fits a whole number of times in the background
positioning area. In the case of the width (height is analogous):
If X ≠ 0 is the width of the image after step one and
W is the width of the background positioning area, then the
rounded width X' = W / round(W /
X) where round() is a function that returns the nearest
natural number (integer greater than zero).
If ‘background-repeat’ is ‘round’ for one dimension only and if ‘background-size’ is ‘auto’ for the other dimension, then there is a
third step: that other dimension is scaled so that the original aspect
ratio is restored.
In this example the background image is shown at its intrinsic size:
div {
background-image: url(image1.png);
background-repeat: repeat; /* default */
background-size: auto } /* default */
In the following example, the background is shown with a width of 3em
and its height is scaled proportionally to keep the original aspect
ratio:
In the following example, the background is shown with a width of
approximately 3em: scaled so that it fits a whole number of times in the
width of the background. The height is scaled proportionally to keep the
original aspect ratio:
div {
background-image: url(image3.png);
background-repeat: round repeat;
background-size: 3em auto }
In the following example, the background image is shown with a width of
3em and a height that is either the height corresponding to that width at
the original aspect ratio or slightly less:
div {
background-image: url(image4.png);
background-repeat: repeat round;
background-size: 3em auto }
In the following example, the background image is shown with a height
of approximately 4em: scaled slightly so that it fits a whole number of
times in the background height. The width is the approximately the width
that correspond to a 4em height at the original aspect ratio: scaled
slightly so that it fits a whole number of times in the background width.
div {
background-image: url(image5.png);
background-repeat: round;
background-size: auto 4em }
If the background image's width or height resolves to zero, this causes
the image not to be displayed. (The effect is the same as if it had been a
transparent image.)
The ‘background’ property is a shorthand
property for setting most background properties at the same place in the
style sheet. The number of comma-separated items defines the number of
background layers. Given a valid declaration, for each layer the shorthand
first sets the corresponding layer of each of ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property's
initial value, then assigns any explicit values specified for this layer
in the declaration. Finally ‘background-color’ is set to the specified
color, if any, else set to its initial value.
In the first rule of the following example, only a value for ‘background-color’ has been given and the
other individual properties are set to their initial values. In the
second rule, many individual properties have been specified.
body { background: red }
p { background: url("chess.png") 40% / 10em gray
round fixed border-box; }
The following example shows how a both a background color (#CCC) and a background image (url(metal.jpg)) are set. The image is rescaled to the
full width of the element:
E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
Another example shows equivalence:
div { background: padding-box url(paper.jpg) white center }
div {
background-color: white;
background-image: url(paper.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-position: center;
background-clip: padding-box;
background-origin: padding-box;
background-size: auto auto }
The following declaration with multiple, comma-separated values
background: url(a.png) top left no-repeat,
url(b.png) center / 100% 100% no-repeat,
url(c.png) white;
is equivalent to
background-image: url(a.png), url(b.png), url(c.png);
background-position: top left, center, top left;
background-repeat: no-repeat, no-repeat no-repeat, repeat;
background-clip: border-box, border-box, border-box;
background-origin: padding-box, padding-box, padding-box;
background-size: auto auto, 100% 100%, auto auto;
background-attachment: scroll, scroll, scroll;
background-color: white;
3.11. The backgrounds
of special elements
The background of the root element becomes the background of the canvas and its
background painting area extends to cover
the entire canvas, although any images are sized and positioned relative
to the root element as if they were painted for that element alone. (In
other words, the background
positioning area is determined as for the root element.) If
the root's ‘background-color’ value is ‘transparent’, the canvas's background color is UA
dependent. The root element does not paint this background again, i.e.,
the used value of its background is transparent.
For documents whose root element is an HTML HTML
element [HTML401] or an XHTML html element [XHTML11]: if the computed value of
‘background-image’ on the root element is
‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate
the computed values of the background properties from that element's first
HTML BODY or XHTML body
child element. The used values of that BODY
element's background properties are their initial values, and the
propagated values are treated as if they were specified on the root
element. It is recommended that authors of HTML documents specify the
canvas background for the BODY element rather than
the HTML element.
According to these rules, the canvas underlying the following HTML
document will have a “marble†background:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
>
<html>
<head>
<title>Setting the canvas background</title>
<style type="text/css">
body { background: url("http://example.org/marble.png") }
</style>
</head>
<body>
<p>My background is marble.</p>
</body>
</html>
The ‘::first-line’ pseudo-element is
like an inline-level element for the purposes of the background (see
section 5.12.1 of [CSS21]). That means, e.g., that in a
left-justified first line, the background does not necessarily extend all
the way to the right margin.
4. Border properties
The border can either be a predefined style (solid line, double line,
dotted line, pseudo-3D border, etc.) or it can be an image. In the former
case, various properties define the style (‘border-style’),
color (‘border-color’), and thickness (‘border-width’)
of the border.
These properties set the foreground color of the border specified by the
border-style properties.
‘Border-color’ is a shorthand for the four
‘border-*-color’ properties. The four
values set the top, right, bottom and left border, respectively. A missing
left is the same as right, a missing bottom is the same as top, and a
missing right is also the same as top.
These properties set the style of the border, unless there is a border image
‘Border-style’ is a shorthand for the other
four. Its four values set the top, right, bottom and left border
respectively. A missing left is the same as right, a missing bottom is the
same as top, and a missing right is also the same as top.
No border. Color and width are ignored (i.e., the border has width 0,
unless the border is an image, see ‘background-image’
‘hidden’
Same as ‘none’, but has
different behavior in the border conflict resolution rules for
border-collapsed tables [CSS21].
‘dotted’
A series of round dots.
‘dashed’
A series of square-ended dashes.
‘solid’
A single line segment.
‘double’
Two parallel solid lines with some space between them. (The thickness
of the lines is not specified, but the sum of the lines and the space
must equal ‘border-width’.)
‘groove’
Looks as if it were carved in the canvas. (This is typically achieved
by creating a “shadow†from two colors that are slightly lighter and
darker than the ‘border-color’.)
‘ridge’
Looks as if it were coming out of the canvas.
‘inset’
Looks as if the content on the inside of the border is sunken into
the canvas. Treated as ‘ridge’ in
border-collapsed tables. [CSS21]
‘outset’
Looks as if the content on the inside of the border is coming out of
the canvas. Treated as ‘groove’
in border-collapsed tables. [CSS21]
Borders are drawn in front of the element's background, but behind the
element's content (in case it overlaps).
Example renderings of the predefined border styles.
Note: There is no control over the spacing of the dots and
dashes, nor over the length of the dashes. Implementations are encouraged
to choose a spacing that makes the corners symmetrical.
Note: This specification does not define how borders of
different styles should be joined in the corner. Also note that rounded
corners may cause the corners and the contents to overlap, if the padding
is less than the radius of the corner.
These properties set the thickness of the border. Where
<border-width> = <length> | thin | medium | thick
The <length> may not be negative. The lengths
corresponding to ‘thin’, ‘medium’ and ‘thick’ are not specified, but the values are
constant throughout a document and thin ≤
medium ≤ thick. A UA could, e.g., make the thickness depend on the
‘medium’ font size: one choice might be
1, 3 & 5px when the ‘medium’
font size is 17px or less.
‘Border-width’ is a shorthand that sets the
four ‘border-*-width’ properties. If it
has four values, they set top, right, bottom and left in that order. If
left is missing, it is the same as right; if bottom is missing, it is the
same as top; if right is missing, it is the same as top.
Note that the initial width is ‘medium’, but the initial style is ‘none’ and therefore the used width is 0.
When the used width of the border is 0, we say that the border is
absent.
This is a shorthand property for setting the width, style, and color of
the top, right, bottom, and left border of a box. Omitted values are set
to their initial values.
The ‘border’ property is a shorthand property
for setting the same width, color, and style for all four borders of a
box. Unlike the shorthand ‘margin’
and ‘padding’ properties, the
‘border’
property cannot set different values on the four borders. To do so, one or
more of the other border properties must be used.
The ‘border’ shorthand also resets ‘border-image’
to its initial value. It is therefore recommended that authors use the
‘border’
shorthand, rather than other shorthands or the individual properties, to
override any border settings earlier in the cascade. This will ensure that
‘border-image’ has also been reset to allow
the new styles to take effect.
The CSS Working Group intends for the ‘border’ shorthand to
reset all border properties in future levels of CSS as well. For example,
if a ‘border-characters’ property
is introduced in the future to allow glyphs as borders, it will also be
reset by the ‘border’ shorthand. By using the ‘border’ shorthand to
reset borders, authors can be guaranteed a “blank canvas†no matter
what properties are introduced in the future.
For example, the first rule below is equivalent to the set of four
rules shown after it:
p { border: solid red }
p {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red;
border-image: none;
}
Since, to some extent, the properties have overlapping functionality,
the order in which the rules are specified is important.
Consider this example:
blockquote {
border-color: red;
border-left: double;
color: black
}
In the above example, the color of the left border is black, while the
other borders are red. This is due to ‘border-left’ setting the width, style,
and color. Since the color value is not given by the ‘border-left’
property, it will be taken from the ‘color’ property. The fact that the
‘color’ property is set after the
‘border-left’ property is not relevant.
all elements, except table element when ‘border-collapse’ is ‘collapse’
Inherited:
no
Percentages:
Refer to corresponding dimension of the border
box.
Media:
visual
Computed value:
see individual properties
The two length or percentage values of the ‘border-*-radius’ properties define the radii of a
quarter ellipse that defines the shape of the corner of the outer border
edge (see the diagram below). The first value is the horizontal radius,
the second the vertical radius. If the second value is omitted it is
copied from the first. If either length is zero, the corner is square, not
rounded. Percentages for the horizontal radius refer to the width of the
border box, whereas percentages for the vertical radius refer to the
height of the border box.
The two values of ‘border-top-left-radius: 55pt 25pt’ define the
curvature of the corner.
The ‘border-radius’ shorthand sets all four
‘border-*-radius’ properties. If values
are given before and after the slash, then the values before the slash set
the horizontal radius and the values after the slash set the vertical
radius. If there is no slash, then the values set both radii equally. The
four values for each radii are given in the order top-left, top-right,
bottom-right, bottom-left. If bottom-left is omitted it is the same as
top-right. If bottom-right is omitted it is the same as top-left. If
top-right is omitted it is the same as top-left.
The padding edge (inner border) radius is the outer border radius minus
the corresponding border thickness. In the case where this results in a
negative value, the inner radius is zero. (In such cases its center might
not coincide with that of the outer border curve.) Likewise the content
edge radius is the padding edge radius minus the corresponding padding, or
if that is negative, zero. The border and padding thicknesses in the
curved region are thus interpolated from the adjoining sides, and when two
adjoining borders are of different thicknesses the corner will show a
smooth transition between the thicker and thinner borders.
Note that this means that if the outer curve extends past the
adjacent corner's padding edge, the inner curve may not be a full quarter
ellipse.
All border styles (‘solid’,
‘dotted’, ‘inset’, etc.) follow the curve of the border.
The effect of a rounded corner when the two borders it
connects are of unequal thickness (left) and the effect of a rounded
corner on borders that are thicker than the radius of the corner (right).
5.3. Corner Clipping
A box's backgrounds, but not its border-image, are clipped to the appropriate
curve (as determined by ‘background-clip’). Other effects that clip
to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content
of replaced elements is always trimmed to the content edge curve. Also,
the area outside the curve of the border edge does not accept mouse events
on behalf of the element.
This example adds appropriate padding, so that the contents do not
overflow the corners. Note that there is no border, but the background
will still have rounded corners.
Color and style transitions must be contained within the segment of the
border that intersects the smallest rectangle that contains both border
radii as well as the center of the inner curve (which may be a point
representing the corner of the padding edge, if the border radii are
smaller than the border-width).
The center of color and style transitions between adjoining borders is
at the point on the curve that is at an angle that is proportional to the
ratio of the border widths. For example, if the top and right border
widths are equal, that point is at a 45° angle from the horizontal,
and if the top is twice the width of the right the point is at a 30°
angle from the horizontal. The line demarcating this transition is drawn
between the point at that angle on the outer arc and the point at that
angle on the inner arc.
It is not defined what these transitions look like.
Given these corner shapes, color and style transitions
must be contained within the green region. In case D the rectangle
defined by the border radii does not include the center of the inner
curve (which is a sharp corner), so the transition region is expanded to
include that corner. Transitions may take up the entire transition
region, but are not required to: For example, a gradient color transition
between two solid border styles might take up only the region bounded by
the tips of the outer radii and the tips of the inner radii (represented
in case D by the dark green region).
5.5. Overlapping Curves
Corner curves must not overlap: When the sum of any two adjacent border
radii exceeds the size of the border box, UAs must proportionally reduce
the used value of all border radii until none of them overlap. The
algorithm for reducing radii is as follows:
Let f =
min(Li/Si), where i
∈ {top, right, bottom, left}, Si is the sum of the
radii of the corners on side i, and Ltop
= Lbottom = the width of the box, and
Lleft = Lright = the height of
the box. If f < 1, then all corner radii are reduced by
multiplying them by f.
Note that this formula ensures that quarter circles remain
quarter circles and large radii remain larger than smaller ones, but it
may reduce corners that were already small enough, which may make borders
of nearby elements that should look the same look different.
If the curve interferes with UI elements such as scrollbars, the UA may
further reduce the used value of the affected border radii (and only the
affected border radii) as much as necessary, but no more.
The rendering of the box must be exactly the same as if the reduced
border-radius values were those originally specified.
For example, the borders A and D of the figure below might be the result of
all corners need to be reduced by a factor 0.8 to make them fit. The
used border radii thus are 0.4em (instead of 0.5em) and 1.6em (instead of
2em). See borders B and C in the figure.
These rounded corner might be the result of ‘width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em
2em’ for A and D; and ditto but with ‘height: 2em’ for B and C.
5.6. Effect on Tables
The ‘border-radius’ properties do apply to
‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius
properties to ‘table’ and ‘inline-table’ elements, but is not required to. In
this case not only must the border radii of adjacent corners not
intersect, but the horizontal and vertical radii of a single corner may
not extend past the boundaries of the cell at that corner (i.e. the cell's
other corners must not be affected by this corner's border-radius). If the
computed values of the border radii would cause this effect, then the used
values of all the border radii of the table must be reduced by the same
factor so that the radii neither intersect nor extend past the boundaries
of their respective corner cells.
The effect of border-radius on internal table
elements is undefined in CSS3 Backgrounds and Borders, but may be
defined in a future specification. CSS3 UAs should ignore
border-radius properties applied to internal table elements when
‘border-collapse’ is ‘collapse’.
This example draws ovals of 15em wide and 10em high:
Authors can specify an image to be used in place of the border styles.
In this case, the border's design is taken from the sides and corners of
an image specified with ‘border-image-source’, whose pieces may be
sliced, scaled and stretched in various ways to fit the size of the border image area. The border-image
properties do not affect layout: layout of the box, its content, and
surrounding content is based on the ‘border-width’ and ‘border-style’
properties only.
This example creates a top and bottom border consisting of a whole
number of orange diamonds and a left and right border of a single,
stretched diamond. The corners are diamonds of a different color. The
image to tile is as follows. Apart from the diamonds, it is transparent:
The image is 81 by 81 pixels and has to be divided into 9 equal parts.
The style rules could thus be as follows:
The result, when applied to a DIV of 12 by 5em, will be similar to
this:
This shows a more complicated example, demonstrating how the border
image corresponds to the fallback border-style but can also extend beyond
the border area. The border image is a wavy green border with an extended
corner effect:
The rest of the border properties then interact to lay out the tiles as
follows:
Diagram of all border-image properties and how they
interact, and showing the rendering with and without the border-image in
effect.
Here, even though the border-width is 12px, the ‘border-image-width’ property computes to
124px. The border-image area is then outset 31px from the border-box and
into the margin area. If the border-image fails to load (or border images
are not supported by the UA), the fallback rendering uses a green double
border.
Notice that the ‘border’ shorthand resets ‘border-image’.
This makes it easy to turn off or reset all border effects:
.notebox {
border: double orange;
/* must set 'border' shorthand first, otherwise it erases 'border-image' */
border-image: url("border.png") 30 round;
/* but other 'border' properties can be set after */
border-width: thin thick;
}
...
.sidebar .notebox {
box-shadow: 0 0 5px gray;
border-radius: 5px;
border: none; /* turn off all borders */
/* 'border' shorthand resets 'border-image' */
}
All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Inherited:
no
Percentages:
N/A
Media:
visual
Computed value:
‘none’ or the image with its URI
made absolute
Specifies an image to use instead of the border styles given by the
‘border-style’ properties and as an
additional background layer for the element. If the value is ‘none’ or if the image cannot be displayed,
the border styles will be used.
All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Inherited:
no
Percentages:
refer to size of the border image
Media:
visual
Computed value:
as specified
The four ‘border-image-slice’ values represent
inward offsets from the top, right, bottom, and left edges of the image
respectively, dividing it into nine regions: four corners, four edges and
a middle. The middle image part is discarded (treated as fully
transparent) unless the ‘fill’ keyword
is present. (It is drawn over the background; see the border-image drawing process.)
If the fourth number/percentage is absent, it is the same as the second.
If the third one is also absent, it is the same as the first. If the
second one is also absent, it is the same as the first.
<percentage>
Percentages are relative to the size of the image: the width of the
image for the horizontal offsets, the height for vertical offsets.
<number>
Numbers represent pixels in the image (if the image is a raster image)
or vector coordinates (if the image is a vector image).
‘fill’
The ‘fill’ keyword, if present,
causes the middle part of the border-image to be preserved. (By default
it is discarded, i.e., treated as empty.)
Negative values are not allowed and values bigger than the size of the
image are interpreted as ‘100%’.
The regions given by the ‘border-image-slice’ values may overlap.
However if the sum of the right and left widths is equal to or greater
than the width of the image, the images for the top and bottom edge and
the middle part are empty, which has the same effect as if a nonempty
transparent image had been specified for those parts. Analogously for the
top and bottom values.
Diagram illustrating the cuts corresponding to the value
‘25% 30% 12% 20%’
all <length>s made absolute, otherwise as specified
The border image is drawn inside an area called the border image area. This is an area
whose boundaries by default correspond to the border box, see ‘border-image-outset’.
The four values of ‘border-image-width’ specify offsets that
are used to divide the border image area into nine parts. They represent
inward distances from the the top, right, bottom, and left sides of the
area, respectively. If the fourth value is absent, it is the same as the
second. If the third one is also absent, it is the same as the first. If
the second one is also absent, it is the same as the first. Values have
the following meanings:
<percentage>
Percentages refer to the size of the border image area: the width of
the area for horizontal offsets, the height for vertical offsets.
<number>
Numbers represent multiples of the corresponding computed border-width.
‘auto’
If ‘auto’ is specified then the
border image width is the intrinsic width or height (whichever is
applicable) of the corresponding image slice (see ‘border-image-slice’). If the image does
not have the required intrinsic dimension then the corresponding border-width is used instead.
Are percentages of the border-image area useful? Should
percentages be used instead of numbers for ratios?
If two opposite ‘border-image-width’ offsets are large
enough that they overlap, then the used values of all ‘border-image-width’ offsets are
proportionally reduced until they no longer overlap. In mathematical
notation: Given Lwidth as the width of the border
image area, Lheight as its height, and
Wside as the border image width offset
for the side side, let f =
min(Lwidth/(Wleft+Wright),
Lheight/(Wtop+Wbottom)).
If f < 1, then all W are reduced by multiplying
them by f.
All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Inherited:
no
Percentages:
N/A
Media:
visual
Computed value:
all <length>s made absolute, otherwise as specified
The values specify the amount by which the border image area extends beyond the border box
on the top, right, bottom, and left sides respectively. If the fourth
value is absent, it is the same as the second. If the third one is also
absent, it is the same as the first. If the second one is also absent, it
is the same as the first. Numbers represent multiples of the corresponding
border-width.
Negative values are not allowed for any of the ‘border-image-outset’ values.
Portions of the border-image that are rendered outside the border box do
not trigger scrolling. Also such portions are invisible to mouse events
and do not capture such events on behalf of the element.
Note that, even though they never cause a scrolling
mechanism, they may still be clipped by an ancestor or by the viewport.
All elements, except internal table elements when ‘border-collapse’ is ‘collapse’
Inherited:
no
Percentages:
N/A
Media:
visual
Computed value:
as specified
This property specifies how the images for the sides and the middle part
of the border image are scaled and tiled. If the second keyword is absent,
it is assumed to be the same as the first. Values have the following
meanings:
‘stretch’
The image is stretched to fill the area.
‘repeat’
The image is tiled (repeated) to fill the area.
‘round’
The image is tiled (repeated) to fill the area. If it does not fill
the area with a whole number of tiles, the image is rescaled so that it
does.
‘space’
The image is tiled (repeated) to fill the area. If it does not fill
the area with a whole number of tiles, the extra space is distributed
around the tiles.
The exact process for scaling and tiling the border-image parts is given
in the section below.
6.6. Border-image
drawing process
After the border-image given by ‘border-image-source’ is sliced by the
‘border-image-slice’ values, the resulting
nine images are scaled, positioned, and tiled into their corresponding
border image regions in four steps:
The two images for the top and bottom edges are made as tall as the
top and bottom border image
area parts, respectively, and their width is scaled
proportionally.
The images for the left and right edge are made as wide as the left
and right border image area
parts, respectively, and their height is scaled proportionally.
The corner images are scaled to be as wide and as tall as the two
border-image edges they are part of.
The middle image's width is scaled by the same factor as the top
image unless that factor is zero or infinity, in which case the
scaling factor of the bottom is substituted, and failing that, the
width is not scaled. The height of the middle image is scaled by the
same factor as the left image unless that factor is zero or infinity,
in which case the scaling factor of the right image is substituted,
and failing that, the height is not scaled.
If the first keyword is ‘stretch’, the top, middle and bottom images are
further scaled to be as wide as the middle part of the border image area. The height is not
changed any further.
If the first keyword is ‘round’,
the top, middle and bottom images are resized in width, so that
exactly a whole number of them fit in the middle part of the
border-image area, exactly as for ‘round’ in the ‘background-repeat’ property.
If the first keyword is ‘repeat’
or ‘space’, the top, middle, and
bottom images are not changed any further.
The effects of ‘stretch’,
‘round’, ‘repeat’, and ‘space’ for the second keyword are analogous,
acting on the height of the left, middle and right images.
Position the first tile.
If the first keyword is ‘repeat’,
the top, middle, and bottom images are centered horizontally in their
respective areas. Otherwise the images are placed at the left edge of
their respective parts of the border-image area.
If the second keyword is ‘repeat’, the left, middle, and right images are
centered vertically in their respective areas. Otherwise the images
are placed at the top edge of their respective parts of the
border-image area.
Tile and draw.
The images are then tiled to fill their respective areas. All images
are drawn at the same stacking level as normal borders: immediately in
front of the background layers.
In the case of ‘space’, any
partial tiles are discarded and the extra space distributed before,
after, and between the tiles. (I.e. the gap before the first tile, the
gap after the last tile, and the gaps between tiles are equalized.)
This can result in empty border-image side
areas.
When a box is broken at a page break, column break, or, for inline
elements, at a line break, 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. Values have the following meanings:
‘clone’
Each box is independently wrapped with the border and padding. The
‘border-radius’ and ‘border-image’
and ‘box-shadow’, if any, are applied to each
box independently. The background is drawn independently in each box of
the element. A no-repeat background image will thus be rendered once in
each box of the element.
‘slice’
No border and no padding are inserted at the break. No box-shadow is
drawn at the broken edge; ‘border-radius’ does not apply to its
corners; and the ‘border-image’ is rendered for the whole
box as if it were unbroken. The effect is as though the element were
rendered with no break present, and then sliced by the break afterward.
Backgrounds are drawn as if, after the element has been laid out
(including any justification, bidi reordering, page breaks, etc.), all
the element's boxes are taken and put one after the other in visual
order. The background is applied to the bounding box of this composite
box and then the boxes are put back, with their share of the background.
For boxes broken across lines, first boxes on the same line are
connected in visual order. Then boxes on subsequent lines are ordered
according to the element's inline progression direction and aligned on
the baseline. For example in a left-to-right containing block
(‘direction’ is ‘ltr’), the first box is the leftmost box on the
first line and boxes from subsequent lines are put to the right of it.
In a right-to-left containing block, the first box is the rightmost on
the first line and subsequent boxes are put to the left of it.
For boxes broken across columns, the columns are treated as one
continuous element, as if the column boxes were glued together in the
block progression direction of the multi-column element. For boxes
broken across pages, the page content areas are glued together in the
block progression direction of the root element. In these cases, if the
pieces have different widths (heights, if the root element /
multi-column element is in vertical text mode), then each piece draws
its background assuming that the whole element has the same width
(height) as this piece. This ensures that right-aligned images stay
aligned to the right edge, left-aligned images stay aligned to the left
edge, and centered images stay centered.
Two possibilities for ‘box-decoration-break’: on the left, the
value ‘slice’, on the right the value
‘clone’.
For inline elements side of the box that breaks is determined by the
element's inline progression direction, not that of the containing block.
For example, the first part of an inline element with ‘direction: rtl’ inside a block with ‘direction: ltr’ will break on the left side.
any <length> made absolute; any color computed; otherwise as
specified
The ‘box-shadow’ property attaches one or more
drop-shadows to the box. The property is a comma-separated list of
shadows, each specified by 2-4 length values, an optional color, and an
optional ‘inset’ keyword. Omitted
lengths are 0; omitted colors are a UA-chosen color.
The components of each <shadow> are interpreted as
follows:
The first length is the horizontal offset of the shadow. A positive
value draws a shadow that is offset to the right of the box, a negative
length to the left.
The second length is the vertical offset. A positive value offsets the
shadow down, a negative one up.
The third length is a blur radius. Negative values are not allowed. If
the blur value is zero, the shadow's edge is sharp. Otherwise, the larger
the value, the more the shadow's edge is blurred. See below.
The fourth length is a spread distance. Positive values cause the
shadow shape to expand in all directions by the specified radius.
Negative values cause the shadow shape to contract. See below. Note that for inner shadows, expanding the shadow (creating
more shadow area) means contracting the shadow's perimeter shape.
The color is the color of the shadow.
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).
An outer box-shadow casts a shadow as if the border-box of the element
were opaque. The shadow is drawn outside the border edge only: it is
clipped inside the border-box of the element.
An inner box-shadow casts a shadow as if everything outside the padding
edge were opaque. The inner shadow is drawn inside the padding edge only:
it is clipped outside the padding box of the element.
If the box has a nonzero ‘border-radius’, the shadow shape is
rounded in the same way. The ‘border-image’ does not affect the shape of
the box-shadow.
If a spread distance is defined, the shadow is expanded outward or
contracted inward by an operation equivalent to applying the absolute
value of the spread value to a blur operation as defined below and
thresholding the result such that for a positive spread distance all
non-transparent pixels are given the full shadow color and for a negative
spread distance all non-opaque pixels are made transparent. The UA may
approximate this operation by taking an outward outset of the specified
amount normal to the original shadow perimeter. Alternatively the UA may
approximate the transformed shadow perimeter shape by outsetting
(insetting, for inner shadows) the shadow's straight edges by the spread
distance and increasing (decreasing, for inner shadows) and flooring at
zero the corner radii by the same amount. (The UA may even combine these
methods, using one method for outer shadows and another for inner ones.)
For corners with a zero border-radius, however, the corner must remain
sharp—the operation is equivalent to scaling the shadow shape. In
any case, the effective width and height of the shadow shape is floored at
zero. (A zero-sized shadow shape would cause an outer shadow to disappear,
and an inner shadow to cover the entire padding-box.)
A non-zero blur distance indicates that the resulting shadow should be
blurred, such as by a Gaussian filter. The exact algorithm is not defined;
however the resulting shadow must approximate (with each pixel being
within 5% of its expected value) the image that would be generated by
applying to the shadow a Gaussian blur with a standard deviation equal to
half the blur radius
Note this means for a long, straight shadow edge, the blur
radius will create a visibly apparent color transition approximately the
twice length of the blur radius that is perpendicular to and centered on
the shadow's edge, and that ranges from the full shadow color at the
endpoint inside the shadow to fully transparent at the endpoint outside
it.
The example below demonstrates the effects of spread and blur on the
shadow:
The shadow effects are applied front-to-back: the first shadow is on top
and the others are layered behind. Shadows do not influence layout and may
overlap other boxes or their shadows. In terms of stacking contexts and
the painting order, the outer shadows of an element are drawn immediately
below the background of that element, and the inner shadows of an element
are drawn immediately above the background of that element (below the
borders and border image, if any).
If an element has multiple boxes, all of them get drop shadows, but
shadows are only drawn where borders would also be drawn; see ‘box-decoration-break’.
Shadows do not trigger scrolling or increase the size of the scrollable
area.
Below are some examples of an orange box with a blue border being being
given a drop shadow.
The ‘box-shadow’ property applies to the
‘::first-letter’ pseudo-element, but
not the ‘::first-line’ pseudo-element.
Outer shadows have no effect on internal table elements in the collapsing
border model. If a shadow is defined for single border edge in the
collapsing border model that has multiple border thicknesses (e.g. an
outer shadow on a table where one row has thicker borders than the others,
or an inner shadow on a rowspanning table cell that adjoins cells with
different border thicknesses), the exact position and rendering of its
shadows are undefined.
8. Definitions
8.1. Glossary
The following terms and abbreviations are used in this module.
UA
User Agent
A program that reads and/or writes CSS style sheets on behalf of a
user in either or both of these categories: programs whose purpose is to
render documents (e.g., browsers) and programs
whose purpose is to create style sheets (e.g., editors). A UA may fall
into both categories. (There are other programs that read or write style
sheets, but this module gives no rules for them.)
document
A tree-structured document with elements and attributes, such as an
SGML or XML document [XML11].
Conformance requirements are expressed with a combination of descriptive
assertions and RFC 2119 terminology. The key words “MUSTâ€, “MUST
NOTâ€, “REQUIREDâ€, “SHALLâ€, “SHALL NOTâ€, “SHOULDâ€,
“SHOULD NOTâ€, “RECOMMENDEDâ€, “MAYâ€, and “OPTIONAL†in the
normative parts of this document are to be interpreted as described in RFC
2119. However, for readability, these words do not appear in all uppercase
letters in this specification. All of the text of this specification is
normative except sections explicitly marked as non-normative, examples,
and notes. [RFC2119]
Examples in this specification are introduced with the words “for
example†or are set apart from the normative text with
class="example", like this:
This is an example of an informative example.
Informative notes begin with the word “Note†and are set apart from
the normative text with class="note", like this:
Note, this is an informative note.
Conformance to CSS Backgrounds and Borders Level 3 is defined for three
classes:
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.
A style sheet is conformant to CSS Backgrounds and Borders Level 3 if
all of its declarations that use properties defined in this module have
values that are valid according to the generic CSS grammar and the
individual grammars of each property as given in this module.
A renderer is conformant to CSS Backgrounds and Borders Level 3 if, in
addition to interpreting the style sheet as defined by the appropriate
specifications, it supports all the properties defined by CSS Backgrounds
and Borders Level 3 by parsing them correctly and rendering the document
accordingly. However the inability of a UA to correctly render a document
due to limitations of the device does not make the UA non-conformant. (For
example, a UA is not required to render color on a monochrome monitor.)
An authoring tool is conformant to CSS Backgrounds and Borders Level 3
if it writes syntactically correct style sheets, according to the generic
CSS grammar and the individual grammars of each property in this module.
8.3. Levels
This section is informative. CSS has different levels of
features, each a subset of the other. (See [CSSBEIJING] for a full
explanation.) The lists below describe which features from this
specification are in each level.
All features described in the CSS Backgrounds and Borders Module Level
3
8.4. CR exit criteria
As described in the W3C process document, a Candidate
Recommendation (CR) is a specification that W3C recommends for use on
the Web. The next stage is “Recommendation,†when the specification is
sufficiently implemented.
For this specification to be proposed as a W3C Recommendation, the
following conditions shall be met. There must be at least two independent,
interoperable implementations of each feature. Each feature may be
implemented by a different set of products, there is no requirement that
all features be implemented by a single product. For the purposes of this
criterion, we define the following terms:
independent
each implementation must be developed by a different party and cannot
share, reuse, or derive from code used by another qualifying
implementation. Sections of code that have no bearing on the
implementation of this specification are exempt from this requirement.
interoperable
passing the respective test case(s) in the official CSS test suite,
or, if the implementation is not a Web browser, an equivalent test. Every
relevant test in the test suite should have an equivalent test created if
such a user agent (UA) is to be used to claim interoperability. In
addition if such a UA is to be used to claim interoperability, then there
must one or more additional UAs which can also pass those equivalent
tests in the same way for the purpose of interoperability. The equivalent
tests must be made publicly available for the purposes of peer review.
implementation
a user agent which:
implements the specification.
is available to the general public. The implementation may be a
shipping product or other publicly available version (i.e., beta
version, preview release, or “nightly buildâ€). Non-shipping product
releases must have implemented the feature(s) for a period of at least
one month in order to demonstrate stability.
is not experimental (i.e., a version specifically designed to pass
the test suite and is not intended for normal usage going forward).
A minimum of three months of the CR period must have elapsed. This is to
ensure that enough time is given for any remaining major errors to be
caught.
Features will be dropped if two or more interoperable implementations
are not found by the end of the CR period.
Features may/will also be dropped if adequate/sufficient (by judgment of
CSS WG) tests have not been produced for those feature(s) by the end of
the CR period.
9. Changes Since the 17 December
2009 Candidate Recommendation
Tapas Roy was editor of the Border Module, before it was merged with the
Background Module.
Thanks to Ben Stucki for defining what happens with rounded corners if
the two adjoining borders are of unequal thickness or one of them is zero;
to Arjan Eising and Anne van Kesteren for the ‘border-radius’
syntax; to Zack Weinberg for the corner transition regions diagram.
A set of properties for border images was initially proposed by
fantasai. The current simplification (one image cut into nine
parts) is due to Ian Hickson. (Though the original idea seems to originate
with some anonymous Microsoft engineers.)
Finally, special thanks go to Brad Kemper for his feedback and
suggestions for many of the features in the draft, for drawing all the
box-shadow examples, and for proposing some radical
changes to the ‘border-image’ property that solved a
number of problems with the earlier definition.
