CSS Backgrounds and Borders Module Level 3

1. Introduction

This subsection is not normative.

When elements are rendered according to the CSS box model [CSS-BOX-3], each element is either not displayed at all, or formatted as one or more rectangular boxes. Each box has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. (The margin may actually be negative, but margins have no influence on the background and border.)

The properties of this module deal with the decoration of the border area and with the background of the content, padding, and border areas. Additionally the box may be given a “drop-shadow” effect with the box-shadow property.

If an element is broken into multiple box fragments, box-decoration-break [CSS-BREAK-3] defines how the borders and background are divided over the various fragments. (An element can result in more than one fragment if it is broken at the end of a line, at the end of a column or at the end of a page; and continued in the next line, column or page.)

The relative stacking order of backgrounds, borders, and shadows is given in this module. For how these layers interact with other rendered content, see Appendix E “Elaborate description of Stacking Contexts” in [CSS2].

1.1. Module Interactions

This module replaces and extends the background and border features defined in [CSS2] sections 8.5 and 14.2.

All properties in this module apply to the ::first-letter pseudo-element. The background properties and border-radius properties also apply to the ::first-line pseudo-element. The UA may (but is not required to) apply the border-image or box-shadow properties to ::first-line. The UA must not apply the border-color/style/width properties to ::first-line. [CSS2]

1.2. Value Definitions

This specification follows the CSS property definition conventions from [CSS2] using the value definition syntax from [CSS-VALUES-3]. Value types not defined in this specification are defined in CSS Values & Units [CSS-VALUES-3]. Combination with other CSS modules may expand the definitions of these value types. For example, combining with CSS Images allows for using CSS gradients as background-image or border-image values. [CSS-IMAGES-3]

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the CSS-wide keywords as their property value. For readability they have not been repeated explicitly.

2. Backgrounds

Each box has a background layer that may be fully transparent (the default), or filled with a color and/or one or more images. The background properties specify what color (background-color) and images (background-image) to use, and how they are sized, positioned, tiled, etc.

The background properties are not inherited, but the parent box’s background will shine through by default because of the initial transparent value on background-color.

2.1. Layering Multiple Background Images

The background of a box can have multiple background image layers. The number of layers is determined by the number of comma-separated values in the background-image property. Note that a value of none still creates a layer.

Each of the background images is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.

Note: The border-image properties can also define a background image, which, if present, is painted on top of the background layers created by the background properties.

2.2. Base Color: the background-color property

This property sets the background color of a box. This color is drawn behind any background images.

h1 { background-color: #F00 } /* Sets background to red. */

The background color is clipped according to the background-clip value associated with the bottom-most background image layer.

2.3. Image Sources: the background-image property

This property specifies the background image(s) of an element. Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one. The property’s value is given as a comma-separated list of <bg-image> values where

<bg-image> = <image> | none

A value of none counts as a background image layer but draws nothing. An image that is empty (zero width or zero height), that fails to download, or that cannot be displayed (e.g., because it is not in a supported image format) likewise counts as a layer but draws nothing.

See § 2.1 Layering Multiple Background Images for how background-image interacts with other comma-separated background properties to form each background image layer.

When setting a background image, authors should also specify a background-color that will preserve contrast with the text for when the image is unavailable.

For accessibility reasons, authors should not use background images as the sole method of conveying important information. See Web Content Accessibility Guideline F3 [WCAG20]. Images are not accessible in non-graphical presentations, and background images specifically might be turned off in high-contrast display modes.

Note: Stylistic foreground images can be provided in CSS with the content property. Semantically-important foreground images should be provided in the document markup, e.g. with the <img> tag in HTML.

Note: Media fragments can be used to display a portion of an image. The CSS Images module will provide fallback syntax for image formats and include additional controls for image display.

html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

Implementations may optimize by not downloading and drawing images that are not visible (e.g., because they are behind other, fully opaque images).

2.4. Tiling Images: the background-repeat property

This property specifies how background images are tiled after they have been sized and positioned. The property’s value is given as a comma-separated list of <repeat-style> values where

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Single values for <repeat-style> have the following meanings:

repeat-x

Computes to repeat no-repeat.

repeat-y

Computes to no-repeat repeat.

repeat

Computes to repeat repeat.

space

Computes to space space

round

Computes to round round

no-repeat

Computes to no-repeat no-repeat

If a <repeat-style> value has two keywords, the first one applies to the horizontal axis, the second to the vertical one, as follows:

repeat

The image is repeated in this direction as often as needed to cover the background painting area.

space

The image is repeated as often as will fit within the background positioning area without being clipped, and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area. The value of background-position for this direction is ignored unless there is not enough space for two copies of the image in this axis, in which case only one image is placed, and background-position determines its position in this axis.

round

The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does. See the formula under background-size. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.

no-repeat

The image is placed once and not repeated in this direction.

Unless one of the two keywords is no-repeat, the whole background painting area will be tiled, i.e., not just one vertical strip and one horizontal strip.

body {
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

body {
  background-image: url(dot.png) white;
  background-repeat: space
}

See § 2.1 Layering Multiple Background Images for how background-repeat interacts with other comma-separated background properties to form each background image layer.

2.5. Affixing Images: the background-attachment property

If background images are specified, this property specifies whether they are fixed with regard to the viewport (fixed) or scroll along with the box (scroll) or its contents (local). The property’s value is given as a comma-separated list of <attachment> keywords where

<attachment> = scroll | fixed | local

fixed

The background is fixed with regard to the viewport. In paged media where there is no viewport, a fixed background is fixed with respect to the page box and therefore replicated on every page.

Note: There is only one viewport per view. Even if an box is a scroll container, a fixed background doesn’t move with the box.

local

The background is fixed with regard to the box’s contents: if the box has a scrolling mechanism, the background scrolls with the box’s contents, and the background painting area and background positioning area are relative to the scrollable overflow area of the box rather than to the border framing them. Because the scrollable overflow area does not include the border area, for scroll containers the border-box value of background-clip may be treated the same as padding-box.

scroll

The background is fixed with regard to the box itself and does not scroll with its contents. (It is effectively attached to the box’s border.)

Even if the image is fixed, it is still only visible when it is in the background painting area of the box or otherwise unclipped. (See § 2.11 Backgrounds of Special Elements for the cases when background images are not clipped.) Thus, unless the image is tiled, it may be invisible.

body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

Note: User agents that do not support fixed backgrounds (for example due to limitations of the hardware platform) will ignore declarations with the keyword fixed. For example:

body {
  /* For all UAs: */
  background: white url(paper.png) scroll;
  /* For UAs that do fixed backgrounds: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* For all UAs: */
  background: silver;
  /* For UAs that do fixed backgrounds: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

See § 2.1 Layering Multiple Background Images for how background-attachment interacts with other comma-separated background properties to form each background image layer.

2.6. Positioning Images: the background-position property

If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.

The property’s value is given as a comma-separated list of <bg-position> values where

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

If only one value is specified, the second value is assumed to be center. If two values are given, a <length-percentage> as the first value represents the horizontal position (or offset) and a <length-percentage> as the second value represents the vertical position (or offset). The <length-percentage> values here represent an offset of the top left corner of the background image from the top left corner of the background positioning area.

Note: A pair of keywords can be reordered, while a combination of keyword and length or percentage cannot. So center left is valid while 50% left is not.

If three or four values are given, then each <length-percentage> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, background-position: bottom 10px right 20px represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero.

Positive values represent an offset inward from the edge of the background positioning area. Negative values represent an offset outward from the edge of the background positioning area.

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

<percentage>

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size.

For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.

<length>

A length value gives a fixed length as the offset. For example, with a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.

top

Computes to 0% for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.

right

Computes to 100% for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.

bottom

Computes to 100% for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.

left

Computes to 0% for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.

center

Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

background-position: right 3em bottom 10px

See § 2.1 Layering Multiple Background Images for how background-position interacts with other comma-separated background properties to form each background image layer.

2.6.1. Serialization of background-position values

The specified value and computed value of the <bg-position> type serialize exactly as defined in [CSS-VALUES-4] for <position>. For 3-value productions (which are not valid in <position>), the specified value serialization is identical to the equivalent 4-value syntax except that the omitted offset remains omitted.

2.7. Painting Area: the background-clip property

Determines the background painting area, which determines the area within which the background is painted. Values have the following meanings:

border-box

The background is painted within (clipped to) the border box.

padding-box

The background is painted within (clipped to) the padding box.

content-box

The background is painted within (clipped to) the content box.

Note: The root element has a different background painting area and thus the background-clip property has no effect when specified on it. See § 2.11 Backgrounds of Special Elements.

Note: The background is always drawn behind the border, if any. See “Elaborate description of Stacking Contexts” in [CSS2] Appendix E.

See § 4.2 Corner Shaping for how border-radius affects the shape of the background painting area.

See § 2.1 Layering Multiple Background Images for how background-clip interacts with other comma-separated background properties to form each background image layer.

2.8. Positioning Area: the background-origin property

This property determines the background positioning area: the area within which any background images are positioned. For elements rendered as multiple box fragments (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes box-decoration-break [CSS-BREAK-3] operates on to determine the background positioning area(s).

padding-box

The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)

border-box

The position is relative to the border box.

content-box

The position is relative to the content box.

If the background-attachment value for this layer is fixed, then this property has no effect: in this case the background positioning area is the initial containing block.

Note: If background-clip is padding-box, background-origin is border-box, background-position is top left (the initial value), and the element has a non-zero border, then the top and left edges of the background image will be clipped.

See § 2.1 Layering Multiple Background Images for how background-origin interacts with other comma-separated background properties to form each background image layer.

2.9. Sizing Images: the background-size property

This property specifies the size of each background image. The property’s value is given as a comma-separated list of <bg-size> values where

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

Values have the following meanings:

contain

Scale the image, while preserving its natural aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

cover

Scale the image, while preserving its natural aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

[ <length-percentage [0,∞]> | auto ]{1,2}

The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.

A <percentage> is relative to the background positioning area.

An auto value for one dimension is resolved by using the image’s natural aspect ratio and the size of the other dimension, or failing that, using the image’s natural size, or failing that, treating it as 100%.

If both values are auto then the natural width and/or height of the image should be used, if any, the missing dimension (if any) behaving as auto as described above. If the image has neither natural size, its size is determined as for contain.

Negative values are invalid.

div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box }

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box }

p {
  background-size: 15px 15px;
  background-image: url(tile.png)}

body {
background-size: auto;            /* default */
background-image: url(flower.png) }

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30% }

If background-repeat is round for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the background positioning area. In the case of the width (height is analogous):

If X ≠ 0 is the width of the image after step one and W is the width of the background positioning area, then the rounded width X' = W / round(W / X) where round() is a function that returns the nearest natural number (integer greater than zero).

If background-repeat is round for one dimension only and if background-size is auto for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.

div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* default */
  background-size: auto }            /* default */

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* default */
  background-size: 3em }             /* = '3em auto' */

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto }

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto }

div {
  background-image: url(image5.png);
  background-repeat: round;
  background-size: auto 4em }

If the background image’s width or height resolves to zero, this causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)

See § 2.1 Layering Multiple Background Images for how background-size interacts with other comma-separated background properties to form each background image layer.

2.9.1. Serialization of background-size values

The specified value and computed value of the <bg-size> type always serialize as two values, even when the second value is auto, due to the shortest, most backwards-compatible serialization principle.

2.10. Backgrounds Shorthand: the background property

The background property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background image layers. Given a valid declaration, for each layer the shorthand first sets the corresponding value of each of background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property’s initial value, then assigns any explicit values specified for this layer in the declaration. Finally background-color is set to the specified color, if any, else set to its initial value.

This property’s value is given as a comma-separated list of values where

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>

Note: A color is permitted in <final-bg-layer>, but not in <bg-layer>.

If one <visual-box> value is present then it sets both background-origin and background-clip to that value. If two values are present, then the first sets background-origin and the second background-clip.

body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }

body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em auto;
    background-repeat: round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

2.11. Backgrounds of Special Elements

The document canvas is the infinite surface over which the document is rendered. [CSS2] Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the <body> element) as described below. However, if the element whose background would be used for the canvas is display: none, then the canvas background is transparent.

If the canvas background is not opaque, the canvas surface below it shows through. The texture of the canvas surface is UA-dependent (but is typically an opaque white).

2.11.1. The Canvas Background and the Root Element

The background of the root element becomes the canvas background and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element’s box as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.

2.11.2. The Canvas Background and the HTML <body> Element

For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background using the BODY element rather than the HTML element.

Note: Using containment disables this special handling of the HTML body element. See the CSS Containment 1 § 2 Strong Containment: the contain property for details.

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>Setting the canvas background</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>My background is marble.</p>
  </body>
</html>

2.11.3. The ::first-line Pseudo-element‘s Background

The ::first-line pseudo-element is like an inline-level element for the purposes of the background (see section 5.12.1 of [CSS2]). That means, e.g., that in a left-justified first line, the background does not necessarily extend all the way to the right edge.

3. Borders

The border can either be a predefined style (solid line, double line, dotted line, pseudo-3D border, etc.) or it can be an image. In the former case, various properties define the style (border-style), color (border-color), and thickness (border-width) of the border.

3.1. Line Colors: the border-color properties

These properties set the foreground color of the border specified by the border-style properties.

The border-color property is a shorthand property for setting border-top-color, border-right-color, border-bottom-color, and border-left-color in a single declaration.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

3.2. Line Patterns: the border-style properties

These properties control whether a border appears, and if it does what style it’s drawn in (if it is not overridden by a border image).

The border-style property is a shorthand property for setting border-top-style, border-right-style, border-bottom-style, and border-left-style in a single declaration.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

The style is specified as a <line-style> keyword, where

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Values have the following meanings:

none

No border. Color and width are ignored (i.e., the border has width 0). Note this means that the initial value of border-image-width will also resolve to zero.

hidden

Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS2].

dotted

A series of round dots.

dashed

A series of square-ended dashes.

solid

A single line segment.

double

Two parallel solid lines with some space between them. (The thickness of the lines is not specified, but the sum of the lines and the space must equal border-width.)

groove

Looks as if it were carved in the canvas. (This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the specified border-color.)

ridge

Looks as if it were coming out of the canvas.

inset

Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model. [CSS2]

outset

Looks as if the content on the inside of the border is raised out of the canvas. Treated as groove in the collapsing border model. [CSS2]

Borders are drawn in front of the element’s background, but behind the element’s content (in case it overlaps).

Note: Border colors close to black or white may need different color calculations than colors in between in order to create the required “3D” effect of groove, ridge, inset, or outset.

Note: There is no control over the spacing of the dots and dashes, nor over the length of the dashes. Implementations are encouraged to choose a spacing that makes the corners symmetrical.

Note: This specification does not define how borders of different styles should be joined in the corner. Also note that rounded corners may cause the corners and the contents to overlap, if the padding is less than the radius of the corner.

3.3. Line Thickness: the border-width properties

These properties specify the thickness of the border, i.e. the border width. Where

<line-width> = <length [0,∞]> | thin | medium | thick

Negative values are invalid. The thin, medium, and thick keywords are equivalent to 1px, 3px, and 5px, respectively.

The border-width property is a shorthand property for setting border-top-width, border-right-width, border-bottom-width, and border-left-width in a single declaration.

If there is only one component value, it applies to all sides. If there are two values, the top and bottom are set to the first value and the right and left are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

The resolved value for the border-width properties is the used value.

If the border-style corresponding to a given border-width is none or hidden, then the used width is 0.

Note: Although the initial width is medium, the initial style is none; therefore the used initial width is 0.

3.4. Border Shorthand Properties

These shorthand properties set the border-width, border-color, and border-style of the top, right, bottom, and left borders of a box. Omitted values are set to their initial values.

The border property is a shorthand property for setting the same border-width, border-color, and border-style for all four borders of a box. Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.

The border shorthand also resets border-image to its initial value. It is therefore recommended that authors use the border shorthand, rather than other shorthands or the individual properties, to override any border settings earlier in the cascade. This will ensure that border-image has also been reset to allow the new styles to take effect.

Note: The CSS Working Group intends for the border shorthand to reset all border properties in future levels of CSS as well. For example, if a border-characters property is introduced in the future to allow glyphs as borders, it will also be reset by the border shorthand. By using the border shorthand to reset borders, authors can be guaranteed a “blank canvas” no matter what properties are introduced in the future.

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

Since, to some extent, the properties have overlapping functionality, the order in which the rules are specified is important.

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

4. Rounded Corners

4.1. Curve Radii: the border-radius properties

The two <length-percentage> values of the border-*-radius properties define the radii of a quar