Examples

	A right angle: 90deg = 100grad = 0.25turn ≈ 1.0708rad
	A flat angle: 180deg = 200grad = 0.5turn ≈ 2.1416rad
	A right angle (towards the left): -90deg = -100grad = -0.25turn ≈ -1.0708rad
	A null angle: 0deg = 0grad = 0turn = 0rad

Specifications

Browser compatibility

See also

• CSS Reference index
• CSS Data Types : <angle>, <color>, <frequency>, <identifier>, <integer>, <length>, <number>, <percentage>, <ratio>, <resolution>, <shape>, <string>, <time>, <timing-function>, <uri>

Summary

The animation-delay property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.

A value of 0 (the default) indicates that the animation should begin as soon as it's applied. Otherwise, the value specifies an offset from the moment the animation is applied to the element; animation will begin that amount of time after being applied.

Specifying a negative value for the animation delay causes the animation to begin executing immediately. However, it will appear to have begun executing partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.

It is often convenient to use the shorthand property animation to set all animation properties at once.

• Initial value : 0
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-delay: <time> [, <time>]*

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-delayWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

Summary

The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.

It is often convenient to use the shorthand property animation to set all animation properties at once.

• Initial value : normal
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-direction: normal | alternate [, normal | alternate]*

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-directionWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

Summary

The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle.

A value of 0 (the default) indicates that no animation should occur.

It is often convenient to use the shorthand property animation to set all animation properties at once.

• Initial value : 0
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-duration: <time> [, <time>]*

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-durationWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

Summary

The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.

• Initial value : none
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both]*

Examples

h1 {
  animation-fill-mode: forwards;
}

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-fill-modeED

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

Summary

The animation property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.

A list of CSS properties that can be animated is available; it's worth noting that these are the same properties supported by CSS transitions.

• Initial value : 0
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation:  [ <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
              <animation-iteration-count> || <animation-direction>] 
            [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||
              <animation-iteration-count> || <animation-direction>] ]*  

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animationWD

Summary

The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.

It is often convenient to use the shorthand property animation to set all animation properties at once.

• Initial value : 1
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-iteration-count: infinite | <number> [, infinite | <number>]*

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-iteration-countWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

Summary

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

It is often convenient to use the shorthand property animation to set all animation properties at once.

• Initial value : none
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-name: none | <name> [, none | <name>]*

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-nameWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

Summary

The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

• Initial value : running
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-play-state: running | paused [, running | paused]*

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-play-stateWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

Summary

The animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function> .

For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of the keyframe and at the end of the keyframe.

An animation timing function defined within a keyframe block applies to that keyframe; otherwise. If no timing function is specified for the keyframe, the timing function specified for the overall animation is used.

It is often convenient to use the shorthand property animation to set all animation properties at once.

• Initial value : ease
• Applies to: block-level and inline-level elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

animation-timing-function: <timing-function> [, <timing-function>]*

where:

Each <timing-function> represents the timing function to link to the corresponding property to animate, as defined in animation-property.

Examples

See CSS animations for examples.

Browser compatibility

Specifications

• CSS Animations Module Level 3: animation-timing-functionWD

See also

• CSS animations
• AnimationEvent
• animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, animation-timing-function, @keyframes

Summary

Signifies a value that is to be automatically computed by a useragent.  The specific effects of auto depend on the property to which it is applied as its value.

Used in

• overflow
• cursor
• width
• marker-offset
• margin
• margin-* (left|bottom|top|right|start|end)
• bottom
• left
• table-layout
• z-index
• -moz-column-width

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers.

Summary

The backface-visibility CSS property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side).

• Initial value : visible
• Applies to : block and inline elements
• Inherited : no
• Media: visual
• Computed value : same as specified value.

Syntax

backface-visibility: visibility

where :

visibility

Is a keyword indicating if the backface must be visible or not. It can have the following values:

• visible meaning that the back face is visible, allowing the front face to be displayed mirrored;
• hidden meaning that the back face is not visible, hiding the front face.

Examples

Specifications

Browser compatibility

See also

• CSS Reference

Summary

If a background-image is specified, background-attachment determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

• Initial value : scroll
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

background-attachment:  <attachment>[, <attachment>]*

Where:

<attachment>

scroll | fixed | local

Values

scroll

If scroll is specified, the background image will scroll within the viewport along with the block the image is contained within.

fixed

If fixed is specified, the background image will not scroll with its containing element, instead remaining stationary within the viewport.

local

Unimplemented in Gecko (Firefox)

Examples

View Live Examples

body {
	background-image: url("images/cartooncat.png");
	background-attachment: fixed;
}

body {
  background-image: url("img1.png"), url("img2.png");
  background-attachment: scroll, fixed;
} 

Browser Compatibility

Specifications

• CSS 2.1 Colors and Backgrounds #background-attachment
• CSS 3 Backgrounds and Borders #background-attachment 

See also

• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• Multiple backgrounds
• Quirksmode background compatibility

Summary

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

-moz-background-clip is supported up to Gecko version 1.9.2 (Firefox 3.6). To support both, older and newer versions of Gecko (Firefox), you have to add both properties in the stylesheet (see examples).

If there is no background-image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

• Initial value : border-box
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : as specified

Syntax

background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*

-moz-background-clip:  [border | padding][, [border | padding]]*   /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */

Values

border-box Requires Gecko 2.0
border (Firefox 1.0-3.6)

The background extends to the outside edge of the border (but underneath the border in z-ordering).
Default value, but see Browser compatibility section below for special case Internet Explorer 7.

padding-box Requires Gecko 2.0
padding (Firefox 1.0-3.6)

No background is drawn below the border (background extends to the outside edge of the padding).

content-box Requires Gecko 2.0

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

Examples

 pre {
   border: 5px navy;
   border-style: dotted double;
   background: #F8D575;
   /* The yellow background will not go behind the border */
      -moz-background-clip: padding;      /* Firefox 1.0-3.6 */
   -webkit-background-clip: padding-box;  /* Safari, Chrome */
           background-clip: padding-box;  /* Firefox 4.0+, Opera 10.5, Chrome */
 }

Browser compatibility

• [*]  IE 7 (not other versions of IE) behaves like background-clip:padding if overflow: hidden | auto | scroll.

• Konqueror 3.5.4 supports -khtml-background-clip.

Specifications

• CSS 3 Backgrounds and Borders #background-clip
• Latest Editor's Draft (includes content-box)

See also

• -moz-background-size
• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• clip

Summary

background-color sets the background color of an element, either through a color value or the keyword transparent.

• Initial value : transparent
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : as specified

Syntax

background-color: color | transparent | inherit

Values

color 

The color can be specified as a hexadecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.

transparent 

The default value for background-color is transparent meaning the element has no color of its own, instead showing the color of the element behind it.

Examples

View Live Examples

.exampleOne {
	background-color: teal;
	color: white;
}

.exampleTwo {
	background-color: rgb(153,102,153);
	color: rgb(255,255,204);
}

.exampleThree {
	background-color: #666699;
	color: #FFFFFF;
}

Notes

Color reference: See color values.

Browser compatibility

Specifications

• CSS 2.1 Colors and Backgrounds
• CSS 3 Backgrounds & Borders

See also

• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• Multiple backgrounds

Summary

The background CSS property is a shorthand property for setting the individual background property values in a single place in the style sheet. background can be used to set the values for one or more of: background-color, background-image, background-position, background-repeat, -moz-background-size, and background-attachment.

The background shorthand property assigns explicit given values and sets missing properties to their initial values.

• Initial value :  transparent || none || repeat || scroll || 0% 0%
• Applies to: all elements
• Inherited : no
• Percentages: allowed on background-position
• Media: visual
• Computed value : see individual properties

Syntax

background:  [<bg-layer>, ]* <final-bg-layer>

Where:

<bg-layer>

[ <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  inherit

<final-bg-layer>

[ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]
|  inherit || <background-color>

Values

One or more of the following, in any order:

<background-color>

See background-color

<background-image>

See background-image

<background-repeat>

See background-repeat

<background-attachment>

See background-attachment

<background-position>

See background-position

Examples

View Live Examples

body { background: red; }

.topbanner { background: url("topbanner.png") #00D repeat-y fixed; }

Notes

The background property first sets the individual background properties to their initial values, then assigns the explicit values specified in the declaration. You do not have to define a value for each of the individual properties, only those you want to change from their initial defaults.

Browser compatibility

Specifications

• CSS Backgrounds and Borders Module Level 3
• CSS 2.1 Colors and backgrounds #background

See also

• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• -moz-background-size, -moz-background-inline-policy
• Using gradients
• Multiple backgrounds

Summary

The background-image CSS property sets the background image for an element. It is often more convenient to use the shorthand background.

• Initial value : none
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : absolute URI or none

Syntax

background-image:  <bg-image>[, <bg-image>]*

Where:

<bg-image>

<uri> | <gradient> | none

Values

<uri>

The location of the image resource to be used as a background image.

none

Used to specify that an element is to have no background image.

Examples

View Live Examples

body { background-image: url("images/darkpattern.png"); }

div { background-image: url("images/foo.png"), url("images/bar.png"); }

p { background-image: none; }

Notes

Developers should ensure that they specify a background-color to be used if an image is not available. Background images are rendered on top of the background color.

Browser compatibility

Specifications

• CSS 2.1 Colors and backgrounds #background-image
• CSS 3 Backgrounds and borders #background-image

See also

• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• -moz-linear-gradient, -moz-radial-gradient
• -moz-image-rect
• Multiple backgrounds
• When can I use SVG in CSS backgrounds?

Summary

The background-origin CSS property determines the background positioning area (the origin of a background-image).
background-origin does not apply when background-attachment is fixed.

This property is reset to its initial value by the background shorthand property.

• Initial value : padding
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : as specified
  

Syntax

/* since Gecko 2.0 (Firefox 4.0) */
background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*

/* older versions (multiple backgrounds since Gecko 1.9.2 / Firefox 3.6) */
-moz-background-origin: [padding | border | content][, [border | padding | content]]*

Values

padding-box New in Firefox 4
padding (Firefox 1.0-3.6)

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

border-box New in Firefox 4
border (Firefox 1.0-3.6)

The background position is relative to the border, so the image can go behind the border.

content-box New in Firefox 4
content (Firefox 1.0-3.6)

The background position is relative to the content.

Examples

 .example {
   border: 10px double;
   padding: 10px;
   background: url('image.jpg');
   background-position: center left;
   /* The background will be inside the padding */       
   -moz-background-origin: content;          /* Firefox 1.0-3.6 */
   -webkit-background-origin: content-box;   /* Safari, Chrome */
           background-origin: content-box;   /* Firefox 4.0+ */
}

div {
  background-image: url('mainback.png'), url('logo.jpg');
  background-position: 0px 0px, top right;
  -moz-background-origin: padding, content;
  -webkit-background-origin: padding-box, content;
          background-origin: padding-box, content-box;
}

Browser compatibility

• [*] IE up to version 7 behaves as if it were background-origin: border-box;
• [**] IE 8 behaves as if it were background-origin: padding-box;
  
• Konqueror 3.5.4 supports -khtml-background-origin.

Specifications

• CSS 3 Background and borders #background-origin
  Specifies the values border-box | padding-box | content-box.

See also

• -moz-background-size
• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size

Summary

The background-position CSS property sets the initial position of any background image that has been set.

It is often more convenient to use the shorthand background.

• Initial value : 0% 0%
• Applies to: all elements
• Inherited : no
• Percentages: refer to the size of the box itself
• Media: visual
• Computed value : for <length> the absolute value, otherwise a percentage

Syntax

background-position:  <bg-position>[, <bg-position>]*
background-position:  [ 
<percentage>| 

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

background-position:  [ top | center | bottom ]

background-position:  
inherit

Where:

<bg-position> is one of:

[ <percentage>| <length>| left | center | right  ]
                      [ <percentage> | <length> | top  | center | bottom ]?
[ top | center | bottom ]
inherit

Values

Accepts one or two values, up to four values in supporting browsers. Negative <percentage> and <length> values are allowed.

• If only one value is specified, the second value is assumed to be center.
• The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).

The specifications allow for 4 values enabling offsetting a background image from any corner, not just the top left. If four values are specified, they must include two sides and two offsets. This is not yet fully supported in all browsers.

<percentage>

With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of 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 padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

<length>

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

top

Equivalent to 0% for the vertical position.

right

Equivalent to 100% for the horizontal position.

bottom

Equivalent to 100% for the vertical position.

left

Equivalent to 0% for the horizontal position.

center

Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

Examples

View the live example

.exampleone {
	background-image: url("logo.png");
	background-position: top;
}

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.examplethree {
	background: url("logo.png") 2cm bottom;
}

.examplefour {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplefive {
	background: url("logo.png") 3em 50%;
}

.examplesix {
	background-image: url("logo.png");
	background-position: right 20px bottom 20px;

.examplesix {
  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;
} 

Browser compatibility

Specifications

• CSS 2.1 Colors and backgrounds #background-position
• CSS Backgrounds and Borders Module Level 3

See also

• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• Multiple backgrounds

Summary

background-repeat specifies whether the image is repeated (tiled), and how.

• Initial value : repeat
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : as specified

Syntax

background-repeat: <repeat-style>[, <repeat-style>]*

Where:

<repeat-style>

repeat | repeat-x | repeat-y | no-repeat | inherit | round | space 

Values

repeat

The image is repeated both horizontally and vertically.

repeat-x

The image is repeated horizontally only.

repeat-y

The image is repeated vertically only.

no-repeat

The image is not repeated; only one copy of the image is drawn.

space

The image is repeated as many times as can fully fit, separated by white space if repeating does not create an exact fit.

round

 The image is repeated as often as will fit. If it doesn't fit a whole number of times, the background images are rescaled so they do.

.exampleone {
	background-image: url("logo.png");
	background-repeat: repeat-x;
}

.exampletwo {
	background-image: url("logo.png");
	background-repeat: no-repeat;
}

.examplethree {
  background-image: url("img1.png"), url("img2.png");
  background-repeat: repeat-x, repeat-y;
} 

Summary

The background-size CSS property specifies the size of the background images.

• Initial value : auto
• Applies to: all elements
• Inherited : no
• Percentages: see below
• Media: visual
• Computed value : for <length> the absolute value, otherwise a percentage

Syntax

background-size:  <bg-size>[, <bg-size>]*        /* Gecko 2.0 (Firefox 4.0) and later */

Where <bg-size> is one of:

• [ <percentage>| <length>| auto ]
[ <percentage>| <length>| auto ] ?
• contain

• cover

Multiple values apply to individual background layers, from front to back, in the same manner as for all other background properties.

Values

<percentage>

Scales the background image in the desired dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present.

<length>

Scales the background image to the specified length in the desired dimension.

auto

Scales the background image in the relevant direction such that its intrinsic proportion is maintained.

The first value determines how the image is scaled horizontally, the second how it is scaled vertically. If only one value is specified, the second value is implicitly auto.  Negative sizes are not allowed.

contain

Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

cover

Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

Interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height).  A bitmap image always has intrinsic dimensions and an intrinsic proportion.  A vector image may have both intrinsic dimensions (and thus must have an intrinsic proportion).  It also may have one or no intrinsic dimension, and in either case it might or might not have an intrinsic proportion.  Gradients are treated as images with no intrinsic dimensions or intrinsic proportion.

Background images generated from elements using -moz-element (which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.

The rendered size of the background image is then computed as follows:

If both components of background-size are specified and are not auto:

The background image renders at the specified size.

If the background-size is contain or cover:

The image is rendered, preserving its intrinsic proportion, at the largest size contained within, or covering, the background positioning area.  If the image has no intrinsic proportion, then it is rendered at the size of the background positioning area.

If the background-size is auto or auto auto:

If the image has both intrinsic dimensions, it is rendered at that size.  If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the background positioning area.  If it has no dimensions but has a proportion, it's rendered as if contain had been specified instead.  If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion.  If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the background positioning area.

If the background-size has one auto component and one non-auto component:

If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion.  If the image has no intrinsic proportion, use the specified dimension for that dimension.  For the other dimension, use the image's corresponding intrinsic dimension if there is one.  If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.

Note that background sizing for vector images that lack intrinsic dimensions or proportion is not yet fully implemented in all browsers.  Be careful about relying on the behavior described above, and test in multiple browsers (specifically including versions of Firefox 7 or earlier and Firefox 8 or greater) to be sure different renderings are acceptable.

Examples

This demonstration of background-size: cover and this demonstration of background-size: contain are meant to be opened in new windows so that you can see how contain and cover behave when the background positioning area's dimensions vary. This series of demos of how background-size works and interacts with other background-* properties should pretty much cover the remaining ground in how to use background-size alone and in conjunction with other properties.

Notes

While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using -moz-border-image.

.foo {
        background-image: url(bg-image.png);

       -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
         -o-background-size: 100% 100%;           /* Opera 9.5 */
    -webkit-background-size: 100% 100%;           /* Safari 3.0 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
 
       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

If you are specifying a gradient as background and have specified a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%).  Rendering of gradients in such cases changed in Firefox 8, and at present it is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* NOT RECOMMENDED */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* OKAY */
       background-size: 25px 50px;
       background-size: 50% 50%;
}

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a gradient, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

Browser compatibility

• As of July 2009, Opera 9.5's computation of the background positioning area is incorrect for fixed backgrounds.  Opera 9.5 also interprets the two-value form as a horizontal scaling factor and, from appearances, a vertical clipping dimension.
• WebKit-based browsers as of July 2009 implement an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.
• Konqueror 3.5.4 supports -khtml-background-size.
• -moz-background-size is no longer supported in Gecko 2.0; you must use background-size instead.
• See Scaling of SVG backgrounds for details on how SVG images are scaled when used for background-size.

Specifications

• CSS 3 Backgrounds and borders #background-size

See also

• background, background-attachment, background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size
• -moz-background-origin, -moz-background-clip
• Multiple backgrounds

Summary

The border-bottom-color CSS property sets the color of the bottom border of an element.

See border-top-color for more and detailed information.

Summary

The border-bottom property is a shorthand property that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.

• Initial value : see individual properties for details
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : see individual properties

Syntax

border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit

Values

<border-width> 

See border-bottom-width.

<border-style> 

See border-bottom-style.

<border-color> 

See border-bottom-color.

Examples

View Live Examples

element { 
    border-bottom: 1px solid #000;
}

Notes

The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.

As with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. It sets those that are not specified to their default values. This means that:

  border-bottom-style: dotted;
  border-bottom: thick green;

is actually the same as

  border-bottom-style: dotted;
  border-bottom: none thick green;

and the value of border-bottom-style given before border-bottom is ignored.

Since the default value of border-bottom-style is none, not specifying the <border-style> part of the value means that the property specifies no border.

Specifications

• CSS 1
• CSS 2.1
• CSS 3

Browser compatibility

See also

border, border-bottom, border-bottom-width, border-bottom-style, border-bottom-color,

Summary

The CSS property border-bottom-left-radius sets the rounding of the bottom-left corner of the border. Previous to Gecko 2.0 (Firefox 4.0) this was named -moz-border-radius-bottomleft.

See the border-top-left-radius and border-radius properties for more information.

Summary

The CSS property border-bottom-right-radius sets the rounding of the bottom-right corner of the border. Previous to Gecko 2.0 (Firefox 4.0) this was named -moz-border-radius-bottomright.

See the border-top-left-radius and border-radius properties for more information.

Summary

border-bottom-style sets the line style of the bottom border of a box.

• Initial value : none
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : as specified

Syntax

border-bottom-style: <border-style> | inherit

<border-style> Values

none 

No border.

hidden 

Same as 'none', except in terms of border conflict resolution for table elements.

dotted 

Series of dots.

dashed 

Series of short dashes or line segments.

solid 

Single, straight, solid line.

double 

Two straight lines that add up to the pixel amount defined as border-width.

groove 

Carved effect.

ridge 

Opposite of 'groove'. The border appears 3D (coming out).

inset 

Makes the box appear embedded.

outset 

Opposite of 'inset'. Makes the box appear 3D (embossed).

Related properties

• border-left-style
• border-right-style
• border-top-style
• border-style

Examples

View Live Examples

element {
        border-bottom-size: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}

Notes

Unless a border-style value is set, your border will not appear because the default value is set to 'none.'

Specifications

• CSS 2.1
• CSS 3

Browser Compatibility

See Also

border-bottom-style, border-bottom, border-bottom-color, border-bottom-width,

Summary

border-bottom-width sets the width of the bottom border of a box.

• Initial value : medium
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : absolute length; '0' if the border style is 'none' or 'hidden'

Syntax

border-bottom-width: <border-width> | inherit

<border-width> Values

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

Note: An em value is also supported.

Related properties

• border-left-width
• border-right-width
• border-top-width
• border-width

Examples

View Live Examples

element { 
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #000;
}

Specifications

• CSS 1
• CSS 2.1
• CSS 3

Browser Compatibility

See Also

border, border-bottom, border-bottom-style, border-bottom-color,

Summary

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders.

• Initial value : separate
• Applies to: table and inline-table elements
• Inherited : Yes
• Media: visual
• Computed value : as specified

Syntax

border-collapse:  collapse | separate | inherit

Values

separate

Default, use the "separated borders" rendering model

collapse

Use the "collapsed borders" rendering model

Examples

View Live Examples

th, td { border: solid 1px red; }
table { border-collapse: collapse; }

Notes

In the "collapsed border" rendering model, the border-style value of inset behaves like groove, and outset behaves like ridge.

Specifications

• CSS 2.1 Table #borders

Browser compatibility

See also

caption-side, table-layout, border-collapse, border-spacing, empty-cells

Summary

The border-color CSS property is a shorthand property for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color

• Initial value : the element's color property
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : the computed value of color by default, or as specified.

Syntax

border-color:  [ <color> || transparent ]{1,4} | inherit

Values

Accepts one, two, tree or four values.

<color>

See <color> value for possible keywords and units.

transparent

The border is not drawn but it still takes up space on the page.

If one color value is given, it applies to all four borders.
Two values apply first to the top and bottom border and second to the left and right border.
Three values apply first to the top, second to the left and right and third to the bottom border.
Four values apply to top, right, bottom and left border in that order.

Examples

View Live Examples

pre { 
  border-style: ridge dashed solid;
  border-color: orange blue;
}

Notes

In order to see the border you must at least set the border-style to something visible.

Specifications

• CSS 2.1 #border-color

Browser compatibility

Mozilla Extensions

The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox.

-moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors, -moz-border-left-colors

See also

border, border-top-color, border-right-color, border-bottom-color, border-left-color, border-width, border-style

Summary

The border property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

• Initial value : see individual properties for details
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : see individual properties

Syntax

border:  [ <border-width> || <border-style> || <border-color> ] | inherit

Values

border-width

Optional, default value medium is used if absent. See border-width.

border-style 

Required, default value none is used if absent. See border-style.

border-color 

Optional, default value if absent: The value of the element's color property (foreground color). See border-color.

Examples

View Live Examples

element { border: dashed }          /* dashed border of medium thickness, the same color as the text */
element { border: dotted 1.5em }    /* dotted, 1.5em thick border, the same color as the text */
element { border: solid red }       /* solid, red border of medium thickness */
element { border: solid blue 10px } /* solid, blue border of 10px thickness */

Notes

While the border-width, border-style, and border-color properties accept up to four values, this property only accepts one value for each property.

Specifications

• CSS 1
• CSS 2.1 Box #border-shorthand
• CSS 3 Backgrounds and Borders #border-shorthand

Browser compatibility

See also

border, border-width, border-style, border-color, margin, padding

Summary

The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases.

The border-image is used instead of the border styles given by the border-style properties.  If the value is none or if the image cannot be displayed, the border styles will be used. An additional background image for the element is drawn on top of the background-image.

• Initial value : none
• Applies to: all elements, except table elements when border-collapse is collapse
• Inherited : no
• Media: visual
• Computed value : any URI made absolute, any <length> made absolute, other parts as specified

Syntax

none | 
  [ <image> [ <number> | <percentage> ]{1,4} [/ <border-width>{1,4}]? ] && [ stretch | repeat | round ]{0,2} 

Values

none

No image displayed, other border styles are used.

<image> (required)

The image value is a <uri>, e.g. url(http://example.org/image.png)

<number> | <percentage> (required)

One, two, three or four 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.

One value belongs to all four sides of the image.
Two values belong 1. to top and bottom and 2. to right and left side.
Three values belong 1. to top, 2. to the right and left side and 3. to bottom.
Four values belong to the top, right, bottom and left edge of the image in that order.

In Gecko 1.9.1 (Firefox 3.5) the middle part of the image is drawn like a background-image of the element. This may change in future versions.

Percentages are relative to the width/height of the image.
Numbers represent pixels in the image (if the image is a raster image) or vector coordinates (if the image is an SVG image).

<border-width> (optional)

If the slash / is present in the property value, the one, two, three or four values after it are used for the width of the border instead of the border-width properties. The order of the values is the same as for border-width.

stretch | round | repeat (optional)

One or two keywords, that specify how the images for the sides and the middle part are scaled and tiled.
stretch  (default value) will cause images to be scaled to fit their box.
round    will tile the images, but also scale them so that a whole number fit in the box.
repeat   simply tiles the images inside the box.
The first keyword describes how to draw the top, middle, and bottom images, while the second describes the left and right borders. If the second is absent, it is assumed to be the same as the first. If both are absent, the default value stretch is used.

Examples

[needs some instructive live examples]

#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; } 

.button  { -moz-border-image: url(button.png) 0 5 0 5; }

.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }

/* Edge case, acts like a full scaled background-image in Firefox 3.5 */

 div     { -moz-border-image: url(bgimage.png) 0; } 

Browser compatibility

Specifications

• CSS 3 Backgrounds and borders #border-image

Summary

The border-left-color CSS property sets the color of the left border of an element.

See border-top-color for more and detailed information.

Summary

The border-left is a shorthand property for setting the width, style and color of left border of a box. This property can be used to set the values for one or more of: border-left-width, border-left-style, border-left-color. Omitted values are set to their initial values.

• Initial value : see individual properties for details
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : see individual properties

Syntax

border-left: [border-width || border-style || border-color | inherit] ;

Values

border-width

See border-width.

border-style 

See border-style.

border-color 

See border-color.

Examples

element { 
    border-left: 1px solid #000;
}

Notes

If the rule does not specify a border color, the border will have the color specified by the color property.

Specifications

• CSS 1
• CSS 2.1
• CSS 3

Browser compatibility

See also

border, border-width, border-style, border-color, margin, padding

border-right, border-right-color, border-right-style, border-right-width

Summary

border-left-style sets the line style of the left border of a box.

See the border-bottom-style property for more information.

Summary

border-left-width sets the width of the left border of a box.

See the border-bottom-width property for more information.

Summary

The border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

border-radius is a shortcut to set the four properties border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius.

• Initial value : 0
• Applies to: all elements, except the table element when border-collapse is collapse
• Inherited : no
• Percentages: yes
• Media: visual
• Computed value

Syntax

border-radius:   <border-radius>{1,4} [ / <border-radius>{1,4}]?

border-radius: 1em/5em;

/* is equivalent to */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Examples

 border: solid 10px;
 
 /* the border will curve into a 'D' */
 border-radius: 0 50px 50px 0;

 border: groove 1em red;
 border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

   background: gold;
   border-radius: 40px 10px; 

background: black;
color: gray;
border-radius: 50%;

Notes

• Dotted and dashed rounded border corners are rendered as solid in Gecko; see bug 382721 .
• border-radius does not apply to table elements when border-collapse is collapse.
• Old WebKit handles multiple values different, see below.

Browser compatibility

Specifications

• CSS3 Backgrounds and Borders Module: border-radiusCR

See also

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Summary

border-right-color sets the color of the right border of an element.

See the border-top-color property for more information.

Summary

The border-right is a shorthand property for setting the width, style and color of right border of a box. This property can be used to set the values for one or more of: border-right-width, border-right-style, border-right-color. Omitted values are set to their initial values.

• Initial value : see individual properties for details
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : see individual properties

Syntax

border-right: [border-width || border-style || border-color | inherit] ;

Values

border-width

See border-width.

border-style 

See border-style.

border-color 

See border-color.

Examples

element { 
    border-right: 1px solid #000;
}

Notes

If the rule does not specify a border color, the border will have the color specified by the color property.

Specifications

• CSS 1
• CSS 2.1
• CSS 3

Browser compatibility

See also

border, border-width, border-style, border-color, margin, padding

border-right, border-right-color, border-right-style, border-right-width

Summary

border-right-style sets the line style of the right border of a box.

See the border-bottom-style property for more information.

Summary

border-right-width sets the width of the right border of a box.

See the border-bottom-width property for more information.

Summary

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

• Initial value : 0
  Note: In desktop browsers like Firefox the default value for HTML tables is 2px.
• Applies to: tables and inline-tables
• Inherited : Yes
• Percentages: n/a
• Media: visual
• Computed value : two absolute lengths

Syntax

border-spacing: <length> <length>? | inherit 

Values

Accepts one or two values.

<length>

A single value is for both horizontal and vertical border spacing. See <length> for possible units.

<length> <length>

The first <length> gives the horizontal spacing (space between cells in adjacent columns) and the second length gives the vertical spacing (space between cells in adjacent rows).

Examples

View Live Examples

table { border-spacing: 10px 5px; }

Notes

• This property applies only when border-collapse is separate.
• The border-spacing is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

Specifications

• CSS 2.1 Tables #border-spacing

Browser compatibility

See also

caption-side, table-layout, border-collapse, border-spacing, empty-cells

Summary

The border-style CSS property is a shorthand property for setting the line style for all four sides of the elements border.

• Initial value : none or as individual Properties.
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : as individual properties

Syntax

border-style: [ <border-style> ]{1,4} | inherit

Values

<border-style> 

The Border Style can be any of the following values.

• none : No border, sets width to 0. This is the default value.
• hidden : Same as 'none', except in terms of border conflict resolution for table elements.
• dashed : Series of short dashes or line segments.
• dotted : Series of dots.
• double : Two straight lines that add up to the pixel amount defined as border-width.
• groove : Carved effect.
• inset : Makes the box appear embedded.
• outset : Opposite of 'inset'. Makes the box appear 3D (embossed).
• ridge : Opposite of 'groove'. The border appears 3D (coming out).
• solid : Single, straight, solid line.

Up to four values can be given;
The first value sets all four borders.
The second sets the left and right.
The third sets the bottom.
The fourth sets the left.

Examples

View Live Examples

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notes

The default value of border-style is none. This meant that if you change the border-width and the border-color you will not see the border unless you change this property to something other than none or hidden.

Browser compatibility

Specifications

• CSS 2.1 Box model #border-style

See also

border, border-width, border-color, border-radius

Summary

The border-top-color CSS property sets the color of the bottom border of an element. Note that in many cases the shortcut border-color is more convenient and preferable.

• Initial value : The element's color property
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : the computed color

Syntax

border-top-color:  <color> | transparent | inherit

Values

<color>

See <color> values for the various possible keywords and numerical notations.

transparent

The element has no color of its own, instead showing the color of the element behind it.

Examples

View Live Examples

pre {
    border: ridge 1em gold;
        border-top-color: red;
}

     /* this has the same result:
        border: ridge 1em;
        border-color: red gold gold; */

Specifications

• CSS 2.1 Box #border-color
• CSS 3 Background and Borders #border-color

Browser Compatibility

Mozilla Extensions

-moz-border-top-colors sets the top border to multiple colors for Gecko based browsers like Firefox.

See also

border, border-top, border-color, border-right-color, border-bottom-color, border-left-color

Summary

The border-top is a shorthand property for setting the width, style and color of top border of a box. This property can be used to set the values for one or more of: border-top-width, border-top-style, border-top-color. Omitted values are set to their initial values.

• Initial value : see individual properties for details
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : see individual properties

Syntax

border-top: [border-width || border-style || border-color | inherit] ;

Values

border-width

See border-width.

border-style 

See border-style.

border-color 

See border-color.

Examples

element { 
    border-top: 1px solid #000;
}

Notes

If the rule does not specify a border color, the border will have the color specified by the color property.

Specifications

• CSS 1
• CSS 2.1
• CSS 3

Browser compatibility

See also

border, border-width, border-style, border-color, margin, padding

border-top, border-top-color, border-top-style, border-top-width

Summary

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element.

Previous to Gecko 2.0 (Firefox 4.0) it was named -moz-border-radius-topleft. This is supported as an alias for a short transitional period.

See border-radius for more information.

• Initial value : 0
• Applies to: all elements
• Inherited : no
• Percentages: yes
• Media: visual
• Computed value : two absolute <length>s

Syntax

-moz-border-radius-topleft:  <border-radius> <border-radius>?
border-top-left-radius:      <border-radius> <border-radius>? 

Values

Accepts one <border-radius> value.
New in Firefox 3.5 An optional second value for elliptical corners. The two values define the radii of a quarter ellipse that defines the shape of the corner. The first value is the horizontal radius. The optional second value is the vertical radius, if omitted it's equal to the first.
<border-radius> represents one of:

<length>

See <length> for possible units.

<percentage>

Since Gecko 2.0 (Firefox 4.0): Percentages for the horizontal radius refer to the width of the box, whereas percentages for the vertical radius refer to the height of the box.
In previous Gecko/Firefox versions Non-standard : Relative to the width of the box (the percentage is relative to the width even when specifying the radius for a height).

Examples

div { -moz-border-radius-topleft:  20px;  /* Firefox up to version 3.6 */
   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (before WebKit version 533) */
           border-top-left-radius: 20px;  /* Firefox 4; browsers with CSS3 support */
}

/* elliptical corners supported since Firefox 3.5 (Gecko 1.9.1) */
  
div { -moz-border-radius-topleft:   20px;       /* round corner, fallback for Firefox 1-3.0 */
      -moz-border-radius-topleft:   20px 10px;  /* elliptical border, Firefox 3.5-3.6 */
    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (before WebKit version 532.5) */
            border-top-left-radius: 20px 10px;  /* Firefox 4; browsers with CSS3 support */
}

Browser compatibility

Specifications

CSS 3 Backgrounds and Borders #border-radius

See also

border-radius

Summary

The CSS property border-top-right-radius sets the rounding of the top-right corner of the border. Previous to Gecko 2.0 (Firefox 4.0) this was named -moz-border-radius-topright.

See the border-top-left-radius and border-radius properties for more information.

Summary

border-top-style sets the line style of the top border of a box.

See the border-bottom-style property for more information.

Summary

border-top-width sets the width of the top border of a box.

See the border-bottom-width property for more information.

Summary

The border-width CSS property sets the width of the border of a box. Using the shortcut property border is often more convenient.

• Initial value : medium
• Applies to: all elements
• Inherited : no
• Percentages: N/A
• Media: visual
• Computed value : absolute length; 0 if the border-style is none or hidden

Syntax

 border-width:  <border-width> {1,4}

Values

Accepts one, two, three or four <border-width> values. These whitespace separated values set the width of the top, right, bottom, and left border of a box.

If one value is set, this width applies to all 4 sides.
If two values are set, the first applies to top and bottom, the second applies to the right and left side.
Three values apply to the top, right and bottom side. The left side takes the second value.
Four values apply to the top, right, bottom, left side in that order.

<border-width>

is one value or keyword of:   <length> | thin | medium | thick

thin

Depends on the UA. Typically 1px in desktop browsers like Firefox and IE 8. 2px in IE 4-7.

medium

Depends on the UA. Typically 3px in desktop browsers like Firefox and IE 8. 4px in IE 4-7.

thick

Depends on the UA. Typically 5px in desktop browsers like Firefox and IE 8. 6px in IE 4-7.

<length>

The border's thickness has an explicit value. Cannot be negative. See <length> for possible units.

Related properties

• border-bottom-width
• border-left-width
• border-right-width
• border-top-width 

Examples

border: ridge #ccc;
border-width: 6px;  /* same as "border: ridge #ccc 6px";  6px wide border on all 4 sides */

border: solid red;
border-width: 2px 10px;  /* 2px wide top and bottom border, 10px right and left border */

border: dotted orange;
border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no border right and left */

border: solid lightgreen;
border-width: medium 0 1px thick;  /* three different width, no right border */

Specifications

• CSS 2.1 Box #border-width
• CSS 3 Background #border-width

Browser compatibility

See Also

border, border-style, border-color

Summary

The bottom property specifies part of the position of positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block.

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved above its normal position. However, the top property overrides the bottom property, so if top is not auto, the computed value of bottom is the negative of the computed value of top.

• Initial value : auto
• Applies to: positioned elements
• Inherited : no
• Percentages: refer to height of containing block
• Media: visual
• Computed value : absolute length, percentage, or auto

Syntax

   bottom: <length> | <percentage> | auto | inherit

Values

<length> 

A length, used as described in the summary. Can be negative, zero, or positive.

<percentage> 

A percentage of the containing block's height, used as described in the summary.

auto 

For absolutely positioned elements, position the element based on the top property and treat height: auto as a height based on the content. For relatively positioned elements, offset the element from its original position based on the top property, or if top is also auto, do not offset it at all.

inherit 

Inherits the computed value from its parent element (which may not be its containing block). This computed value is then handled like it was a <length>, a <percentage>, or auto

Examples

element { 
    position: absolute;
    bottom: 20px; 
    height: 200px;
    border: 1px solid #000;
}

The following sample page contrasts position:absolute and position:fixed. When the regular text becomes taller than the viewable portion of the page (the browser window's viewport), blocks positioned with position:absolute will scroll with the page, while blocks positioned with position:fixed will not. Note that IE6 does not support position:fixed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Position at bottom, absolute or fixed</title>
<style type="text/css">
p {font-size:30px; line-height:3em;}
div.pos {width:49%; text-align:center; border:2px solid #00f;}
div#abs {position:absolute; bottom:0; left:0;}
div#fix {position:fixed; bottom:0; right:0;}
</style>
</head>
<body>
  <p>This<br>is<br>some<br>tall,<br>tall,
    <br>tall,<br>tall,<br>tall<br>content.</p>
  <div id="fix" class="pos"><p>Fixed</p></div>
  <div id="abs" class="pos"><p>Absolute</p></div>
</body>
</html>

Notes

For absolutely positioned elements whose containing block is based on a block-level element, this property is an offset from the padding edge of that element.

For absolutely positioned elements, the bottom property has no visible effect when all of top, height, and margin-top are not auto (which is the default value for top and height).

Specifications

• CSS 2.1
• CSS 3

Browser Compatibility

See also

position, top, right, left

Summary

The box-shadow CSS property accepts one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

• Initial value : none
• Applies to: all elements
• Inherited : no
• Media: visual
• Computed value : as specified (any <length> made absolute; any <color> computed)

Syntax

box-shadow:  none | <shadow> [,<shadow>]*

  where <shadow> is defined as:

inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ]

Values

inset (optional)

If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content).
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). Inset shadows are drawn above background, but below border and content.

<offset-x> <offset-y> (required)

This are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See <length> for possible units.
If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).

<blur-radius> (optional)

This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).

<spread-radius> (optional)

This is a fourth <length> value. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).

<color> (optional)

See <color> values for possible keywords and notations.
If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the color property is used. On the other hand, WebKit's shadow is transparent and therefore useless if <color> is omitted.

Live examples

• box-shadow test
• box-shadow tutorial and examples

   -moz-box-shadow: 60px -16px teal;
-webkit-box-shadow: 60px -16px teal;
        box-shadow: 60px -16px teal;

   -moz-box-shadow: 10px 5px 5px black;
-webkit-box-shadow: 10px 5px 5px black;
        box-shadow: 10px 5px 5px black;

   -moz-box-shadow: 3px 3px red, -1em 0 0.4em olive;
-webkit-box-shadow: 3px 3px red, -1em 0 0.4em olive;
        box-shadow: 3px 3px red, -1em 0 0.4em olive;

   -moz-box-shadow: inset 5em 1em gold;
-webkit-box-shadow: inset 5em 1em gold;
        box-shadow: inset 5em 1em gold; 

   -moz-box-shadow: 0 0 1em gold;
-webkit-box-shadow: 0 0 1em gold;
        box-shadow: 0 0 1em gold; 

   -moz-box-shadow: inset 0 0 1em gold;
-webkit-box-shadow: inset 0 0 1em gold;
        box-shadow: inset 0 0 1em gold;

Browser compatibility

Specifications

• CSS3 Backgrounds and Borders Module: box-shadowCR

Summary

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification. Mozilla browsers like Firefox support -moz-box-sizing.

• Initial value : content-box
• Applies to: all elements
• Inherited : no
• Percentages: n/a
• Media: visual
• Computed value : as specified

Syntax

box-sizing:       content-box | border-box

-moz-box-sizing:  content-box | border-box | padding-box 

Values

content-box

This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.

padding-box

The width and height properties include the padding size, and do not include the border or margin. Non-standard padding-box isn't part of CSS3-UI and only supported by Firefox (Gecko).

border-box

The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is not in standards-compliant mode.

Examples

/* support Firefox, Safari/WebKit, Opera and IE8 */

.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Notes

See bug 243412 and its dependents:

• -moz-box-sizing doesn't apply to table cells
• min-height/max-height does not work for -moz-box-sizing: border-box

Specifications

• CSS3 Basic User Interface #box-sizing

Browser compatibility

See also

CSS box model

Summary

The caption-side property positions the content of table-caption at the specified side.

• Initial value : top
• Applies to: 'table-caption' elements
• Inherited : yes
• Percentages: n/a
• Media: visual
• Computed value : as specified

Syntax

caption-side: top | bottom | left | right | inherit

Values

top

caption box will be above the table.

bottom

caption box will be below the table.

left

caption box will be on the left side of the table. This Value is dropped from CSS 2.1 but supported in Gecko (Firefox).

right

caption box will be on the right side of the table. This Value is dropped from CSS 2.1 but supported in Gecko (Firefox).

Examples

View Live Examples

.contentbox table-caption {
  caption-side: bottom;
}

Specifications

• CSS 2 Table  (out of date)
• CSS 2.1 Table #caption-side

Browser Compatibility

See also

caption-side, table-layout, border-collapse, border-spacing, empty-cells

Summary

The clear property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

• Initial value : none
• Applies to: block-level elements (including floats)
• Inherited : No
• Media: visual
• Computed value : as specified

Syntax

clear: none | left | right | both | inherit

Values

none

Element is not moved down to clear past floating elements.

left

Element is moved down to clear past left floats.

right

Element is moved down to clear past right floats.

both

Element is moved down to clear past both left and right floats.

Examples

View Live Examples

h1 { clear: none }
h2 { clear: right }

If you want an element to contain all floating elements inside it, you can either float the container as well, or use clear

#container:after { content: "."; line-height: 0; height: 0; display: block; visibility: hidden; clear: both; }

Notes

The clear property applies to both floating and non-floating elements.

When it applies to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When it applies to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

Specifications

• CSS 1 Box properties #clear
• CSS 2.1 Visual formatting model #clear

Browser Compatibility

See also

• float
• Box model

Summary

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

• Initial value : auto
• Applies to: absolutely positioned elements
• Inherited : no
• Percentages: n/a
• Media: visual
• Computed value : A rectangle consisting of four computed lengths; otherwise, as specified

Syntax

clip:  
<shape>| auto | 
inherit

Values

<shape>

A rectangular shape of the form

rect(<top>, <right>, <bottom>, <left>)   /* standard syntax */

or

rect(<top> <right> <bottom> <left>)      /* backwards compatible syntax */

where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box.

<top>, <right>, <bottom>, and <left> may either have a <length> value or auto.

auto

The element does not clip (default value)

Examples

p     { border:dotted;  position:relative; }

#img2 { position:absolute;  left:263px;

        clip: rect(40px, 200px, 150px, 30px); 
        /* standard syntax, unsupported by Internet Explorer 4-7 */
      }

#img3 { position:absolute;  left:526px;

        clip: rect(40px  200px  150px  30px);
        /* non-standard syntax, but supported by all major browsers including Firefox and IE */
      }

Specifications

• CSS 2.1 Visual effects #clipping

Browser compatibility

See also

• Related CSS properties: text-overflow, white-space, overflow-x, overflow-y, overflow, display, position

Summary

• Initial value : See The initial clipping path: 'overflow' and 'clip' properties
• Applies to: all elements
• Inherited : no
• Percentages: n/a
• Media: visual
• Computed value :

Syntax

clip-path: <uri> | none | inherit

Values

 uri : <uri> | none | inherit

Examples

.target { clip-path: url(#c1); }

.anothertarget { clip-path: url(resources.svg#c1); }

Specifications

• Clipping, Masking and Compositing
• CSS 3 SVG
• SVG

Browser compatibility

See also

• clip-rule, mask, filter
• Applying SVG effects to HTML content
• SVG

Summary

The color CSS property sets the foreground color of an element's text content.

• Initial value : depends on user agent
• Applies to: all elements
• Inherited : yes
• Percentages: N/A
• Media: visual
• Computed value : as specified

Syntax

color:  <color> | inherit

Values

<color>

The color property accepts various keywords and numeric notations. See <color> values for much details.

Examples

The following are all ways to make the element's text red:

element { color: red }
element { color: #f00 }
element { color: #ff0000 }
element { color: rgb(255,0,0) }
element { color: rgb(100%, 0%, 0%) }
element { color: hsl(0, 100%, 50%) }

/* 50% translucent, support since Firefox 3 */
element { color: rgba(255, 0, 0, 0.5) } 
element { color: hsla(0, 100%, 50%, 0.5) }

Specifications

• CSS 2.1
• CSS 3 Color #color Working draft

Browser compatibility

For the browser compatibility table for the various values, see <color>.

See also

• <color> values
• Color Chart by VisiBone

Summary

The <color> CSS data type denotes a color in the sRGB color space. A color can be described using a keyword, using the RGB cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) or using the HSL cylindrical-coordinate system (via the hsl() and hsla() functional notations).

Associated with the color in the sRGB space, a <color> value also consists of an alpha-channel coordinate, transparency value, indicating how the color should composite with its background color.

Though CSS color values are precisely defined, they may appear differently on an output device. Most of them are not calibrated, and some browsers do not support output devices' color profile. Without these, color rendering may vary a lot.

Interpolation

Values of the <color> CSS data type can be interpolated in order to perform animations or for creating <gradient> values. In that case they are interpolated on each of their red, green, blue components, each handled as a real, floating-point, numbers. [1] Note that interpolation of colors happens in the alpha-premultiplied sRGBA color space to prevent unexpected grey colors to appear. In animations, the speed of the interpolation is determined by the timing function associated with the animation.

Values

There are several ways to describe a <color> value.