The various areas and edges of a typical box. (This diagram is explained in the CSS2.1 Box Model chapter [[!CSS21]].)
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 4 relating to borders and backgrounds. It includes and extends the functionality of CSS level 3 [[!CSS3BACKGROUND]], which builds on CSS level 2 [[CSS21]]. The main extensions compared to level 3 are Fill this in later
The CSS WG maintains an issues list for this module. A test suite for CSS Backgrounds and Borders Level 3 will be developed during the Candidate Recommendation phase.
This section is not normative.
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.
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]].
This specification follows the CSS property definition conventions from [[!CSS21]].
Value types are defined in CSS Values Level 3 [[!CSS3VALUES]].
All properties defined in this specification also accept the inherit keyword as their value, but for readability it has not been listed explicitly.
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 the color and images ('background-image') to use, and how they are sized, positioned, tiled, etc.
The definitions of these properties are given in [[!CSS3BACKGROUNDS]].
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, color, and thickness of the border.
The definitions of most of these properties are given in [[!CSS3BACKGROUNDS]]. Additional properties are defined below.
CSS borders traditionally cover an entire border edge. Sometimes, however, it can be useful to hide some parts of the border.
| Name: | border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left |
| Value: | normal | [ <length> | <percentage> | <fraction> ]+ |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | no |
| Percentages: | refer to width or height of element |
| Media: | visual |
| Computed value: | ''normal'', or a list consisting of absolute lengths, or percentages as specified |
Should these properties be simplified to only accept normal | [ <length> | <percentage> ] +?
These properties split their respective borders into parts along the border edge. The first part is visible, the second is invisible, the third part is visible, etc. Parts can be specified with lengths, percentages, or fractions (expressed by the 'fr' unit, as per [[CSS3GRID]] or its editor's edition). The 'normal' value means that the border is not split, but shown normally.
'border-clip' is a shorthand property for the four individual properties.
If the listed parts are shorter than the border, any remaining border is split proportionally between the specified fractions. If there are no fractions, the behavior is as if ''1fr'' had been specified at the end of the list.
If the listed parts are longer than the border, the specified parts will be shown in full until the end of the border. In this case, all fractions will be zero.
For horizontal borders, parts are listed from left to right. For vertical borders, parts are listed from top to bottom.
The exact border parts are determined by laying out the specified border parts with all fractions initially set to zero. Any remaining border is split proportionally between the fractions specified.
border-clip: 10px 1fr 10px;
border-clip-top: 10px 1fr 10px; border-clip-bottom: 10px 1fr 10px; border-clip-right: 5px 1fr 5px; border-clip-left: 5px 1fr 5px;
By making the first part have zero length, the inverse border of the previous example can easily be created:
border-clip-top: 0 10px 1fr 10px; border-clip-bottom: 0 10px 1fr 10px; border-clip-right: 0 5px 1fr 5px; border-clip-left: 0 5px 1fr 5px;
border: thin solid black; border-clip: 0 1fr; /* hide borders */ border-clip-top: 10px 1fr 10px; /* make certain borders visible */ border-clip-bottom: 10px 1fr 10px;
border-top: thin solid black; border-bottom: thin solid black; border-clip-top: 10px; border-clip-bottom: 10px;
border-top: thin solid black; border-clip: 10px;
This rendering:
A sentence consists of words¹.
¹ Most often.
@footnote {
border-top: thin solid black;
border-clip: 4em;
}
border: 2px solid black; border-top-parts: repeat(10px 10px);
In this example, the repeat pattern is shown five times and there is, by coincidence, no remaining border.
border: 2px solid black; border-top-parts: repeat(10px 10px);
In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a fraction, as if this code had been specified:
border: 2px solid black; border-top-parts: repeat(10px 10px) 1fr;
The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.
border: 4px solid black; border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
border: 4px solid black; border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
border: 4px solid black; border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
All but one of the visible border parts are represented as fractions in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
Here is another rendering where 1fr ends up being 30px:
The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
The following terms and abbreviations are used in this module.
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.)
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 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.
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.
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:
A minimum of sixth 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.