SEO

April 15, 2011

CSS Backgrounds and Borders Module

5. Rounded Corners

5.1. The ‘border-radius’ properties

Name: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
Value: [ <length> | <percentage> ] [ <length> | <percentage> ]?
Initial: 0
Applies to: all elements (but see prose)
Inherited: no
Percentages: Refer to corresponding dimension of the border box.
Media: visual
Computed value: two absolute <length> or percentages
Name: border-radius
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: 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.

Diagram of the inscribed ellipse

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. 

border-radius: 4em;
is equivalent to 
border-top-left-radius:     4em; border-top-right-radius:    4em; border-bottom-right-radius: 4em; border-bottom-left-radius:  4em;
and 
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to 
border-top-left-radius:     2em 0.5em; border-top-right-radius:    1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius:  1em 3em;

5.2. Corner Shaping

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 rounded corners on unequal borders

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. 

DIV { background: black; color: white; border-radius: 1em; padding: 1em }

5.4. Color and Style Transitions

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.

Illustration of the transition region on curved corners

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 

box-sizing: border-box; width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em

The height (2.5em) is enough for the specified radii (0.5em plus 2.5em). However, if the height is only 2em, 

box-sizing: border-box; width: 6em; height: 2em; border-radius: 0.5em 2em 0.5em 2em

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.

[image: rectangle with two tiny rounded corners and two very large ones, on opposite corners]

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: 

DIV.standout { width: 13em; height: 8em; border: solid black 1em; border-radius: 7.5em 5em }

6. Border Images

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:

Tile for border

The image is 81 by 81 pixels and has to be divided into 9 equal parts. The style rules could thus be as follows: 

DIV { border: double orange 1em; border-image: url("border.png") 27 round stretch; }

The result, when applied to a DIV of 12 by 5em, will be similar to this:

element with a diamond border

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:

Diagram: The border image shows a wavy green border with more exaggerated waves towards the corners, which are capped by a disconnected green circle. Four cuts at 124px offsets from each side divide the image into 124px-wide square corners, 124px-wide but thin side slices, and a small center square.

The ‘border-image-source’ image, with the four ‘border-image-slice’ cuts at 124px dividing the image into nine parts.

The rest of the border properties then interact to lay out the tiles as follows:

Diagram: The image-less (fallback) rendering has a green double border. The rendering with border-image shows the wavy green border, with the waves getting longer as they reach the corners. The corner tiles render as 124px-wide squares and the side tiles repeat a whole number of times to fill the space in between. Because of the gradual corner effects, the tiles extend deep into the padding area. The whole border image effect is outset 31px, so that the troughs of the waves align just outside the padding edge.

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' */ }

6.1. The ‘border-image-source’ property

Name: border-image-source
Value: none | <image>
Initial: none
Applies to: 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.

6.2. The ‘border-image-slice’ property

Name: border-image-slice
Value: [<number> | <percentage>]{1,4} && fill?
Initial: 100%
Applies to: 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: two horizontal cuts and two vertical cuts through an image

Diagram illustrating the cuts corresponding to the value ‘25% 30% 12% 20%’

6.3. The ‘border-image-width’ property

Name: border-image-width
Value: [ <length> | <percentage> | <number> | auto ]{1,4}
Initial: 1
Applies to: All elements, except table elements when ‘border-collapse’ is ‘collapse’
Inherited: no
Percentages: Relative to width/height of the border image area
Media: visual
Computed value: 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?

Negative values are not allowed for any ‘border-image-width’ values.

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.

6.4. The ‘border-image-outset’ property

Name: border-image-outset
Value: [ <length> | <number> ]{1,4}
Initial: 0
Applies to: 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.

6.5. The ‘border-image-repeat’ property

Name: border-image-repeat
Value: [ stretch | repeat | round ]{1,2}
Initial: stretch
Applies to: 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:

  1. Scale to ‘border-image-width’.

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

  2. Scale to ‘border-image-repeat’.

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

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

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

6.7. The ‘border-image’ shorthand

Name: border-image
Value: <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>? [ / <‘border-image-outset’> ]? ]? || <‘border-image-repeat’>
Initial: See individual properties
Applies to: See individual properties
Inherited: no
Percentages: N/A
Media: visual
Computed value: See individual properties

This is a shorthand property for setting ‘border-image-source’, ‘border-image-slice’, ‘border-image-width’, ‘border-image-outset’ and ‘border-image-repeat’. Omitted values are set to their initial values.

7. Miscellaneous Effects

7.1. The ‘box-decoration-break’ property

Name: box-decoration-break
Value: slice | clone
Initial: slice
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified

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.

Illustration: (1) a single box cut in two in between two lines of text by a page break and (2) two boxes, one before and one after the page break, both with a border all around and their own background image

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.

7.2. The ‘box-shadow’ property

Name: box-shadow
Value: none | <shadow> [ , <shadow> ]*
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: 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.

Where 

<shadow> = inset? && [ <length>{2,4} && <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:

An example of spread and blur on a box with two round corners and two square ones

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.

border:5px solid blue; background-color:orange; width: 144px; height: 144px;
 
border-radius: 20px;
 
border-radius: 0;
box-shadow: rgba(0,0,0,0.4) 10px 10px;
 A round-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. A square-cornered box with a light gray shadow the same shape as the border box offset 10px to the right and 10px down from directly underneath the box. 
box-shadow: rgba(0,0,0,0.4) 10px 10px inset
 A round-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). A square-cornered box with a light gray shadow the inverse shape of the padding box filling 10px in from the top and left edges (just inside the border). 
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */
 A round-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. A square-cornered box with a light gray shadow the same shape as the box but 20px taller and wider and offset so that the top and left edges of the shadow are directly underneath the top and left edges of the box. 
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset
 A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border). A round-cornered box with a light gray shadow the inverse shape of the box but 20px narrower and shorter filling 20px in from the top and left edges (just inside the border).

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

style sheet

A CSS style sheet.

8.2. Conformance

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:

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

8.3.1. CSS Level 1

8.3.2. CSS Level 2

8.3.3. CSS Level 3

  • 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:
  1. implements the specification.
  2. 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.
  3. 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

The following changes were made to this specification since the 17 December 2009 Candidate Recommendation:

10. Acknowledgments

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.

11. References

Normative references

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 8 September 2009. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2009/CR-CSS2-20090908
[CSS3COLOR]
Tantek Çelik; Chris Lilley; L. David Baron. CSS Color Module Level 3. 28 October 2010. W3C Proposed Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2010/PR-css3-color-20101028
[HTML401]
David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt
[XHTML11]
Murray Altheim; Shane McCarron. XHTML™ 1.1 - Module-based XHTML. 31 May 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-xhtml11-20010531

Other references

[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411
[CSSBEIJING]
Elika J. Etemad. Cascading Style Sheets (CSS) Snapshot 2007. 27 July 2010. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2010/WD-css-beijing-20100727
[WCAG20]
Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211
[XML11]
Eve Maler; et al. Extensible Markup Language (XML) 1.1 (Second Edition). 16 August 2006. W3C Recommendation. URL: http://www.w3.org/TR/2006/REC-xml11-20060816

Property index

Property Values Initial Applies to Inh. Percentages Media
background [ <bg-layer> , ]* <final-bg-layer> see individual properties all elements no see individual properties visual
background-attachment <attachment> [ , <attachment> ]* scroll all elements no N/A visual
background-clip <box> [ , <box> ]* border-box all elements no N/A visual
background-color <color> transparent all elements no N/A visual
background-image <bg-image> [ , <bg-image> ]* none all elements no N/A visual
background-origin <box> [ , <box> ]* padding-box all elements no N/A visual
background-position <bg-position> [ , <bg-position> ]* 0% 0% all elements no refer to size of background positioning area minus size of background image; see text visual
background-repeat <repeat-style> [ , <repeat-style> ]* repeat all elements no N/A visual
background-size <bg-size> [ , <bg-size> ]* auto all elements no see text visual
border <border-width> || <border-style> || <color> See individual properties all elements no N/A visual
border-color <color>{1,4} (see individual properties) all elements no N/A visual
border-image <‘border-image-source’> || <‘border-image-slice’> [ / <‘border-image-width’>? [ / <‘border-image-outset’> ]? ]? || <‘border-image-repeat’> See individual properties See individual properties no N/A visual
border-image-outset [ <length> | <number> ]{1,4} 0 All elements, except internal table elements when ‘border-collapse’ is ‘collapse’ no N/A visual
border-image-repeat [ stretch | repeat | round ]{1,2} stretch All elements, except internal table elements when ‘border-collapse’ is ‘collapse’ no N/A visual
border-image-slice [<number> | <percentage>]{1,4} && fill? 100% All elements, except internal table elements when ‘border-collapse’ is ‘collapse’ no refer to size of the border image visual
border-image-source none | <image> none All elements, except internal table elements when ‘border-collapse’ is ‘collapse’ no N/A visual
border-image-width [ <length> | <percentage> | <number> | auto ]{1,4} 1 All elements, except table elements when ‘border-collapse’ is ‘collapse’ no Relative to width/height of the border image area visual
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? 0 all elements, except table element when ‘border-collapse’ is ‘collapse’ no Refer to corresponding dimension of the border box. visual
border-style <border-style>{1,4} (see individual properties) all elements no N/A visual
border-top, border-right, border-bottom, border-left <border-width> || <border-style> || <color> See individual properties all elements no N/A visual
border-top-color , border-right-color, border-bottom-color, border-left-color <color> currentColor all elements no N/A visual
border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius [ <length> | <percentage> ] [ <length> | <percentage> ]? 0 all elements (but see prose) no Refer to corresponding dimension of the border box. visual
border-top-style, border-right-style, border-bottom-style, border-left-style <border-style> none all elements no N/A visual
border-top-width, border-right-width, border-bottom-width, border-left-width <border-width> medium all elements no width* of containing block visual
border-width <border-width>{1,4} (see individual properties) all elements no see individual properties visual
box-decoration-break slice | clone slice all elements no N/A visual
box-shadow none | <shadow> [ , <shadow> ]* none all elements no N/A visual

Index

via w3.org

at
Subscribe to: Posts (Atom)