CSS Backgrounds and Borders Module Level 4

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

Table of Contents

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 property

See [CSS3BG] for definition.

Where

<position> = [
  [ left | center | right | top | bottom | <percentage> | <length> ]
|
  [ left | center | right | <percentage> | <length> ]
  [ top | center | bottom | <percentage> | <length> ]
|
  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]

Add logical keywords

3 Corners

3.1 Corner Sizing: the 'border-radius property

See [CSS3BG].

3.2 Corner Shaping: the corner-shape property

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

Border radii define a convex elliptical curve at the corner.

bevel

Border radii define a diagonal slice at the corner.

scoop

Border radii define a concave elliptical curve at the corner.

notch

Border radii define a concave rectangular notch at the corner.

  a {
    border-radius: 0 2em 2em 0;
    corner-shape: bevel;
    padding: 0.5em 2em 0.5em 0.5em;

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

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

corners: bevel 50%;

  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

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

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

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

right

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

bottom

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.

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

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

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

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;

  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;

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

  border: 2px solid black;
  border-top-parts: repeat(10px 10px);

  border: 2px solid black;
  border-top-parts: repeat(10px 10px) 1fr;

  border: 4px solid black;
  border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;

  border: 4px solid black;
  border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;

  border: 4px solid black;
  border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;

5 Changes

5.1 Additions Since Level 3

• logical background-position values (start, end)
• the extend keyword of background-repeat
• corner-shape
• multiple borders per element
• border-clip / border-limit
• 5-way slicing for border-image?

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:

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

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 component 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.

Experimental implementations

To avoid clashes with future CSS features, the CSS2.1 specification reserves a prefixed syntax for proprietary and experimental extensions to CSS.

Prior to a specification reaching the Candidate Recommendation stage in the W3C process, all implementations of a CSS feature are considered experimental. The CSS Working Group recommends that implementations use a vendor-prefixed syntax for such features, including those in W3C Working Drafts. This avoids incompatibilities with future changes in the draft.

Non-experimental implementations

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

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 [email protected] mailing list.

References

Normative References

Informative References

Index

Property index

Issues Index