CSS Backgrounds and Borders Module Level 4

Editor’s Draft,

This version:
https://drafts.csswg.org/css-backgrounds-4/
Latest published version:
https://www.w3.org/TR/css-backgrounds-4/
Feedback:
www-style@w3.org with subject line “[css-backgrounds] … message topic …” (archives)
Issue Tracking:
Inline In Spec
Editors:
(W3C)
Elika J. Etemad / fantasai (Invited Expert)
Lea Verou (Invited Expert)
Not Ready For Implementation

This spec is not yet ready for implementation. It exists in this repository to record the ideas and promote discussion.

Before attempting to implement this spec, please contact the CSSWG at www-style@w3.org.


Abstract

This module contains the features of CSS relating to the borders and backgrounds of boxes on the page. It includes and extends the functionality of CSS Backgrounds and Borders Level 3. [CSS3BG] The main extensions compared to level 3 are shaping (corner-shape) and clipping borders (border-clip), logical background positions (background-position), and the extend ability of background-repeat.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css-backgrounds” in the subject, preferably like this: “[css-backgrounds] …summary of comment…

This document was produced by the CSS Working Group (part of the Style Activity).

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 September 2015 W3C Process Document.

1. Introduction

This module is currently maintained as a diff against Level 3. We will fold in the text once it’s all formatted up and in CR again, as this will reduce the effort of keeping them in sync (source diffs will be accurate in reflecting the differences).

2. Backgrounds

2.1. Background Positioning: the background-position shorthand property

Name: background-position#propdef-background-positionReferenced in:2.1. Background Positioning: the background-position shorthand property5.1. Additions Since Level 3
Value: <position>#
Initial: top left
Applies to: all
Inherited: no
Percentages: refer to size of background positioning area minus size of background image
Media: visual
Computed value: A list, each item consisting of: a pair of offsets and an origin, each offset given as a combination of an absolute length and a percentage
Animatable: no

See [CSS3BG] for definition.

Where

<position>#typedef-positionReferenced in:2.1. 
Background Positioning: the background-position shorthand property = [  [ left | center | right | top | bottom | start | end | <percentage> | <length> ]
|
  [ left | center | right | x-start | x-end | <percentage> | <length> ]
  [ top | center | bottom | y-start | y-end | <percentage> | <length> ]
|
  [ center | [ left | right | x-start | x-end ] [ <percentage> | <length> ]? ] &&
  [ center | [ top | bottom | y-start | y-end ] [ <percentage> | <length> ]? ]
|
  [ center | [ start | end ] [ <percentage> | <length> ]? ]
  [ center | [ start | end ] [ <percentage> | <length> ]? ]  ]

Values have the following meanings:

One value
If only one value is given, and that value is start or end, then the keyword is duplicated; otherwise the second keyword defaults to center. The resulting value is treated as a two-component value.
More than one value
If the value contains a start or end keyword, then the shorthand sets background-position-inline and background-position-block to the specified values. Otherwise the shorthand sets background-position-x and background-position-y to the specified values.

Specify the value assignment in more detail. Should expand just like Level 3.

Specify what happens to set of properties that are not set. Maybe they’re just not set?

2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties

This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.

Name: background-position-x#propdef-background-position-xReferenced in:2.1. Background Positioning: the background-position shorthand property2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties
Value: [ center | [ left | right | x-start | x-end ]? [ <percentage> | <length> ]? ]#
Initial: left
Applies to: all
Inherited: no
Percentages: refer to width of background positioning area minus height of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animatable: no

This property specifies the background position’s horizontal component. An omitted origin keyword is assumed to be left.

Name: background-position-y#propdef-background-position-yReferenced in:2.1. Background Positioning: the background-position shorthand property2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties
Value: [ center | [ top | bottom | y-start | y-end ]? [ <percentage> | <length> ]? ]#
Initial: left
Applies to: all
Inherited: no
Percentages: refer to height of background positioning area minus height of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animatable: no

This property specifies the background position’s vertical component. An omitted origin keyword is assumed to be top.

Name: background-position-inline#propdef-background-position-inlineReferenced in:2.1. Background Positioning: the background-position shorthand property2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties
Value: [ center | [ start | end ]? [ <percentage> | <length> ]? ]#
Initial: not applicable (initial value comes from physical property)
Applies to: all
Inherited: no
Percentages: refer to inline-size of background positioning area minus inline-size of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animatable: no

This property specifies the background position’s inline-axis component. An omitted origin keyword is assumed to be start.

Name: background-position-block#propdef-background-position-blockReferenced in:2.1. Background Positioning: the background-position shorthand property2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties
Value: [ center | [ start | end ]? [ <percentage> | <length> ]? ]#
Initial: not applicable (initial value comes from physical property)
Applies to: all
Inherited: no
Percentages: refer to size of background positioning area minus size of background image
Media: visual
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animatable: no

This property specifies the background position’s block-axis component. An omitted origin keyword is assumed to be start.

3. Corners

3.1. Corner Sizing: the 'border-radius property

Name: border-radius#propdef-border-radiusReferenced in:3.2. Corner Shaping: the corner-shape property3.3. Corner Shape and Size: the corners shorthand (2) (3)
Value: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Initial: 0
Applies to: all elements, except table element when border-collapse is collapse
Inherited: no
Percentages: n/a
Media: visual
Computed value: specified value
Animatable: no
Canonical order: n/a

See [CSS3BG].

3.2. Corner Shaping: the corner-shape property

Name: corner-shape#propdef-corner-shapeReferenced in:3.2. Corner Shaping: the corner-shape property (2)3.3. Corner Shape and Size: the corners shorthand (2) (3)5.1. Additions Since Level 3
Value: [round | bevel | scoop | notch]{1,4}
Initial: round
Applies to: all elements, except table element when border-collapse is collapse
Inherited: no
Percentages: n/a
Media: visual
Computed value: specified value
Animatable: no
Canonical order: n/a

By default, non-zero border-radii define a quarter-ellipse that rounds the affected corners. However in some cases, other corner shapes are desired. The corner-shape property specifies a reinterpretation of the radii to define other corner shapes.

round#valdef-corner-shape-roundReferenced in:3.2. Corner Shaping: the corner-shape property
Border radii define a convex elliptical curve at the corner.
bevel#valdef-corner-shape-bevelReferenced in:3.2. Corner Shaping: the corner-shape property
Border radii define a diagonal slice at the corner.
scoop#valdef-corner-shape-scoopReferenced in:3.2. Corner Shaping: the corner-shape property (2)
Border radii define a concave elliptical curve at the corner.
notch#valdef-corner-shape-notchReferenced in:3.2. Corner Shaping: the corner-shape property (2)
Border radii define a concave rectangular notch at the corner.
For example, the following declarations create a right-pointing next button.
a {
  border-radius: 0 2em 2em 0;
  corner-shape: bevel;
  padding: 0.5em 2em 0.5em 0.5em;

As a fallback in UAs that don’t support border-radius, the right side would be rounded rather than pointy.

For scoop and notch, how do the color/style/width transitions work? Do they transition once in the middle, or alternate to match the topness/sideness of that segment of the border?

Add a cubic-bezier() function for random other shapes? Or some other functions?

3.3. Corner Shape and Size: the corners shorthand

Name: corners#propdef-cornersReferenced in:3.3. Corner Shape and Size: the corners shorthand (2) (3)
Value: <‘corner-shape’> || <‘border-radius’>
Initial: see individual properties
Applies to: see individual properties
Inherited: see individual properties
Percentages: see individual properties
Media: visual
Computed value: see individual properties
Animatable: no

The corners shorthand sets corner-shape and border-radius in the same declaration. If either is omitted, it is reset to its initial value.

For example, the following declaration creates a diamond shape.
corners: bevel 50%;

In UAs that don’t support corner-shape, the declaration is ignored (falls back to a rectangle).

In this example, the first declaration creates tabs with vertical sides and rounded corners using border-radius, while the second example makes them trapezoid-shaped in UAs that support corners.
border-radius: 0.25em 0.25em 0 0;
corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0;

4. Partial borders

CSS borders traditionally cover an entire border edge. Sometimes, however, it can be useful to hide some parts of the border.

Here are two proposals for doing this: the second one is from GCPM, the first one is an attempt to recast it more readably. The names are terrible, known problem, proposals accepted. There is a problem with conceiving this as clipping: if you have dotted borders, you want whole dots always, not parts of dots. So it should be a drawing limit, not a clip.

4.1. Partial Borders: the border-limit property

Name: border-limit#propdef-border-limitReferenced in:4.1. Partial Borders: the border-limit property
Value: all | [ sides | corners ] [ <length> | <percentage> ]? | [ top | right | bottom | left ] [ <length> | <percentage> ]
Initial: round
Applies to: all elements, except table element when border-collapse is collapse
Inherited: no
Percentages: relative to border-box
Media: visual
Computed value: as specified

By default, the entire border is drawn. However, border rendering can be limited to only part of a border. The keyword specifies which part, and the length or percentage specifies how much.

sides#valdef-border-limit-sidesReferenced in:4.1. Partial Borders: the border-limit property
The sides are drawn up to but not including the corners (as defined by the border radii). A length or percentage is measured from the center of each side: 50% draws the middle 50% of the border; by default the entire side is drawn.
corners#valdef-border-limit-cornersReferenced in:4.1. Partial Borders: the border-limit property (2) (3)
The corners are drawn plus the specified distance into the sides if specified. A length is measured from the closest edge of the corner area. A percentage is measured from the absolute corner of the border box.
left#valdef-border-limit-leftReferenced in:2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties4.1. Partial Borders: the border-limit property
right#valdef-border-limit-rightReferenced in:4.1. Partial Borders: the border-limit property
For the left and right (vertical) sides, draws the entire side and corner. For the top and bottom (horizontal) sides, draws the left/right portion, as specified. Distances are measured as for corners.
top#valdef-border-limit-topReferenced in:2.1.1. Background Positioning Longhands: the background-position-x, background-position-y, background-position-inline, and background-position-block properties4.1. Partial Borders: the border-limit property
bottom#valdef-border-limit-bottomReferenced in:4.1. Partial Borders: the border-limit property
For the top and bottom (horizontal) sides, draws the entire side and corner. For the left and right (vertical) sides, draws the top/bottom portion, as specified. Distances are measured as for corners.

The following example draws only the middle 50% of the sides.

box { border: solid; border-parts: sides 50% }

The following example draws only the curved parts of the corners.

box { border: solid; border-radius: 1em 2em; border-parts: corners; }

The following example draws only the left 4em of the top border.

box { border-top: solid; border-parts: left 4em; }

The following example draws only the first 10px of each corner:

box { border: solid; border-parts: corners 10px; }

The following example draws the curved part of the corner plus 5px along ths sides:

box { border: solid; border-radius: 5px; border-shape: scoop; border-parts: corners 5px; }

The following example draws the curved part of the corner and all of the side except the middle 40%.

box { border: solid; border-radius: 5px; border-shape: scoope; border-parts: corners 30%; }

4.2. The border-clip properties

Name: border-clip#propdef-border-clipReferenced in:4.2. The border-clip properties (2), 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 length of border-edge side
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.
can be achieved with this style sheet:
@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.

5. Changes

5.1. Additions Since Level 3

Additions are a work in progress... here’s what we’re planning to add. :)

6. Acknowledgments

In addition to the many contributors to the [CSS1], [CSS21], and [CSS3BG] predecessors to this module, the editors would like to thank Tab Atkins, and Håkon Wium Lie for their suggestions and feedback specifically for this Level 4.

Conformance

Document conventions

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.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
A CSS style sheet.
renderer
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 this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification 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 this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Requirements for Responsible Implementation of CSS

The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

Partial Implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

Implementations of CR-level Features

Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-RUBY-1]
Elika Etemad; Koji Ishii. CSS Ruby Layout Module Level 1. 5 August 2014. WD. URL: http://dev.w3.org/csswg/css-ruby-1/
[CSS-TRANSITIONS-1]
CSS Transitions Module Level 1 URL: https://drafts.csswg.org/css-transitions-1/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://dev.w3.org/csswg/css-values/
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: http://www.w3.org/TR/CSS2
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119

Informative References

[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. REC. URL: http://www.w3.org/TR/CSS1/
[CSS3BG]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 9 September 2014. CR. URL: http://www.w3.org/TR/css3-background/
[CSS3GRID]
Alex Mogilevsky; Markus Mielke. CSS Grid Positioning Module Level 3. 5 September 2007. WD. URL: http://www.w3.org/TR/css3-grid

Property Index

Name Value Initial Applies to Inh. %ages Media Ani­mat­able Canonical order Com­puted value Computed value
background-position <position># top left all no refer to size of background positioning area minus size of background image visual no A list, each item consisting of: a pair of offsets and an origin, each offset given as a combination of an absolute length and a percentage
background-position-x [ center | [ left | right | x-start | x-end ]? [ <percentage> | <length> ]? ]# left all no refer to width of background positioning area minus height of background image visual no A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
background-position-y [ center | [ top | bottom | y-start | y-end ]? [ <percentage> | <length> ]? ]# left all no refer to height of background positioning area minus height of background image visual no A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
background-position-inline [ center | [ start | end ]? [ <percentage> | <length> ]? ]# not applicable (initial value comes from physical property) all no refer to inline-size of background positioning area minus inline-size of background image visual no A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
background-position-block [ center | [ start | end ]? [ <percentage> | <length> ]? ]# not applicable (initial value comes from physical property) all no refer to size of background positioning area minus size of background image visual no A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? 0 all elements, except table element when border-collapse is collapse no n/a visual no n/a specified value
corner-shape [round | bevel | scoop | notch]{1,4} round all elements, except table element when border-collapse is collapse no n/a visual no n/a specified value
corners <‘corner-shape’> || <‘border-radius’> see individual properties see individual properties see individual properties see individual properties visual no see individual properties
border-limit all | [ sides | corners ] [ <length> | <percentage> ]? | [ top | right | bottom | left ] [ <length> | <percentage> ] round all elements, except table element when border-collapse is collapse no relative to border-box visual as specified
border-clip normal | [ <length> | <percentage> | <fraction> ]+ normal all elements no refer to length of border-edge side visual normal, or a list consisting of absolute lengths, or percentages as specified
border-clip-top normal | [ <length> | <percentage> | <fraction> ]+ normal all elements no refer to length of border-edge side visual normal, or a list consisting of absolute lengths, or percentages as specified
border-clip-right normal | [ <length> | <percentage> | <fraction> ]+ normal all elements no refer to length of border-edge side visual normal, or a list consisting of absolute lengths, or percentages as specified
border-clip-bottom normal | [ <length> | <percentage> | <fraction> ]+ normal all elements no refer to length of border-edge side visual normal, or a list consisting of absolute lengths, or percentages as specified
border-clip-left normal | [ <length> | <percentage> | <fraction> ]+ normal all elements no refer to length of border-edge side visual normal, or a list consisting of absolute lengths, or percentages as specified

Issues Index

This module is currently maintained as a diff against Level 3. We will fold in the text once it’s all formatted up and in CR again, as this will reduce the effort of keeping them in sync (source diffs will be accurate in reflecting the differences).
Specify the value assignment in more detail. Should expand just like Level 3.
Specify what happens to set of properties that are not set. Maybe they’re just not set?
This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
For scoop and notch, how do the color/style/width transitions work? Do they transition once in the middle, or alternate to match the topness/sideness of that segment of the border?
Add a cubic-bezier() function for random other shapes? Or some other functions?
Here are two proposals for doing this: the second one is from GCPM, the first one is an attempt to recast it more readably. The names are terrible, known problem, proposals accepted. There is a problem with conceiving this as clipping: if you have dotted borders, you want whole dots always, not parts of dots. So it should be a drawing limit, not a clip.
Should these properties be simplified to only accept normal | [ <length> | <percentage> ] +?
Additions are a work in progress... here’s what we’re planning to add. :)