CSS Backgrounds and Borders Module Level 4

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

See [CSS3BG] for definition.

Where

<position> = [  [ left | center | right | top | bottom | start | end | <length-percentage> ]
|
  [ left | center | right | x-start | x-end | <length-percentage> ]
  [ top | center | bottom | y-start | y-end | <length-percentage> ]
|
  [ center | [ left | right | x-start | x-end ] <length-percentage>? ] &&
  [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ]
|
  [ center | [ start | end ] <length-percentage>? ]
  [ center | [ start | end ] <length-percentage>? ]  ]

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.

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

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

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

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

2.2. Painting Area: the background-clip property

Determines the background painting area, which determines the area within which the background is painted. The syntax of the property is given with

<bg-clip> = <box> | border | text

Or should this be defining the -webkit-background-clip property, saying that all the values are identical, with this additional text value?

<box>

The background is painted within (clipped to) the specified box of the element.

text

The background is painted within (clipped to) the intersection of the border box and the geometry of the text in the element and its in-flow and floated descendants.

border

The background is clipped to the area painted by the border, taking border-width and border-style into account but ignoring any transparency introduced by border-color.

3. Borders

3.1. Line Colors: the border-color properties

These properties set the foreground color of the border specified by the border-style properties. If a list of values is provided, the border is split into equal width bands of each color along the direction of the side the border is applied on (i.e. split horizontally on left and right borders and vertically on top and bottom borders), starting outwards.

When interpolating between borders with the same number of colors, interpolation is performed individually per color band as color. Interpolation between borders with different numbers of colors is discrete.

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. This is resolved individually for each list item.

.foo {
  border: 30px solid;
  border-color: skyblue orange yellowgreen indianred, black yellow;
}

The syntax for comma-separated multiple colors is still under active discussion in the CSS WG.

4. Corners

4.1. Corner Sizing: the border-radius property

See [CSS3BG].

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

angle

Border radii define a diagonal slice at the corner.

a {
  border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
  corner-shape: round angle angle round;
  padding: .5em 1em .5em .5em;
}

How to allow custom corners? Perhaps a path() function? Or a cubic-bezier()? Something else?

4.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: angle 50%;

border-radius: 0.25em 0.25em 0 0;
corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;

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

5.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; }

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

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

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

5.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 flexible lengths (expressed by the fr unit, as per [CSS3GRID]). 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 flexible lengths. If there are no flexible lengths, 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 flexible lengths 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 flexible lengths initially set to zero. Any remaining border is split proportionally between the flexible lengths 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;

6. Changes

6.1. Additions Since Level 3

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

• logical background-position values (start, end)
• the extend keyword of background-repeat
• corner-shape
• multiple border colors per border
• logical border properties
• Partial Borders (make part of border shorthand as well!)
• More border-radius shorthands for doing both corners on a side at once.
• Splitting horizontal / vertical spread radius for box-shadow, if we can come up with a sane syntax for it.

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