css-module-background-borders.xml

<?xml version="1.0" encoding="utf-8"?>
<CssModule name="Backgrounds and Borders" standard-reference="http://www.w3.org/TR/css3-background/" status="CR" pub-date="2014-09-09">

  <CssProperty name="background" version="1.0" restriction="enum, color, length, percentage, url" type="background-image, background-repeat, background-attachment, background-position, box" description="Background of an element" syntax="section { $(name): url(image.png) no-repeat #999; }" standard-reference="http://www.w3.org/TR/css3-background/#background" />

  <CssProperty name="background-color" type="color" version="1.0" restriction="color" syntax="body { $(name): white; }" description="Color used for an element's background" standard-reference="http://www.w3.org/TR/css3-background/#background-color" />

  <CssProperty name="background-image" version="1.0" description="Image used for an element's background" syntax="article { $(name): url(image.png); }" restriction="url, enum" type="background-image" standard-reference="http://www.w3.org/TR/css3-background/#background-image" />

  <CssPropertyValue type="background-image">
    <entry value="none" description="A value of 'none' counts as an image layer but draws nothing." />
    <entry value="url()" />
    <entry value="linear-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
    <entry value="radial-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
    <entry value="repeating-linear-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
    <entry value="repeating-radial-gradient()" version="3.0" browsers="FF16,IE10,O12.5" />
  </CssPropertyValue>

  <CssProperty name="background-repeat" restriction="enum" type="background-repeat" version="1.0" description="How the background image is tiled within an element" syntax="article { $(name): no-repeat; }" standard-reference="http://www.w3.org/TR/css3-background/#background-repeat" />

  <CssPropertyValue type="background-repeat">
    <entry value="no-repeat" version="1.0" description="The image is placed once and not repeated in this direction." />
    <entry value="repeat" version="1.0" description="The image is repeated in this direction as often as needed to cover the background painting area." />
    <entry value="repeat-x" version="1.0" description="Equivalent to 'repeat no-repeat'." />
    <entry value="repeat-y" version="1.0" description="Equivalent to 'no-repeat repeat'." />
    <entry value="round" version="3.0" description="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." />
    <entry value="space" version="3.0" description="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." />
  </CssPropertyValue>

  <CssProperty name="background-attachment" version="1.0" browsers="all" restriction="enum" type="background-attachment" description="If background images are specified, this property specifies whether they are fixed with regard to the viewport ('fixed') or scroll along with the element ('scroll') or its contents ('local')." syntax=".box { $(name): fixed; }" standard-reference="http://www.w3.org/TR/css3-background/#background-attachment" />

  <CssPropertyValue type="background-attachment">
    <entry value="fixed" version="1.0" description="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." />
    <entry value="local" version="3.0" description="The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents." />
    <entry value="scroll" version="1.0" description="The background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)" />
  </CssPropertyValue>

  <CssPropertyValue type="background-position">
    <entry value="bottom" description="Equivalent 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." />
    <entry value="center" description="Equivalent 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." />
    <entry value="left" description="Equivalent 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." />
    <entry value="right" description="Equivalent 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." />
    <entry value="top" description="Equivalent 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." />
  </CssPropertyValue>

  <CssProperty name="background-position" version="1.0" type="background-position" restriction="length, percentage" description="If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area." syntax="div { $(name): left center}" standard-reference="http://www.w3.org/TR/css3-background/#background-position" />

  <CssPropertyValue type="box">
    <entry value="border-box" description="The background is painted within (clipped to) the border box." />
    <entry value="padding-box" description="The background is painted within (clipped to) the padding box" />
    <entry value="content-box" description="The background is painted within (clipped to) the content box." />
  </CssPropertyValue>

  <CssProperty name="background-clip" version="3.0" browsers="C,FF4,IE9,O10.5,S3" type="box" restriction="enum" description="Determines the background painting area." syntax="header { $(name): border-box; }" standard-reference="http://www.w3.org/TR/css3-background/#background-clip" />

  <CssProperty name="background-origin" version="3.0" browsers="C,FF4,IE9,O10.5,S3" type="box" restriction="enum" description="For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s)." syntax="header { $(name): border-box; }" standard-reference="http://www.w3.org/TR/css3-background/#background-origin" />

  <CssPropertyValue type="bg-size">
    <entry value="contain" description="Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area." />
    <entry value="cover" description="Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area." />
    <entry value="auto" />
  </CssPropertyValue>

  <CssProperty name="background-size" version="3.0" browsers="C,FF4,IE9,O10,S4.1" type="bg-size" restriction="length, percentage" description="Specifies the size of the background images." syntax="header { $(name): 20px; }" standard-reference="http://www.w3.org/TR/css3-background/#background-size" />

  <CssProperty name="border" version="1.0" restriction="length, color, enum" type="border-style, border-width" description="Shorthand property for setting border width, style and color" syntax="header { $(name): 5px solid red;}" standard-reference="http://www.w3.org/TR/css3-background/#borders" />

  <CssProperty name="border-left" ref="border" />

  <CssProperty name="border-top" ref="border" />

  <CssProperty name="border-right" ref="border" />

  <CssProperty name="border-bottom" ref="border" />

  <CssPropertyValue type="border-width">
    <entry version="1.0" value="medium" />
    <entry version="1.0" value="thin" />
    <entry version="1.0" value="thick" />
  </CssPropertyValue>

  <CssProperty name="border-width" type="border-width" restriction="length" version="1.0" description="'Border-width' is a shorthand that sets the four 'border-*-width' properties. If it has four values, they set top, right, bottom and left in that order. If left is missing, it is the same as right; if bottom is missing, it is the same as top; if right is missing, it is the same as top." syntax="td { $(name): 2px; }" standard-reference="http://www.w3.org/TR/css3-background/#border-width" />

  <CssProperty name="border-top-width" ref="border-width" />

  <CssProperty name="border-left-width" ref="border-width" />

  <CssProperty name="border-right-width" ref="border-width" />

  <CssProperty name="border-bottom-width" ref="border-width" />

  <CssProperty name="border-color" type="color" restriction="color" version="1.0" description="The color of the border around all four edges of an element." syntax="td { $(name): blue; }" standard-reference="http://www.w3.org/TR/css3-background/#border-color" />

  <CssProperty name="border-top-color" ref="border-color" />

  <CssProperty name="border-left-color" ref="border-color" />

  <CssProperty name="border-right-color" ref="border-color" />

  <CssProperty name="border-bottom-color" ref="border-color" />

  <CssPropertyValue type="border-style">
    <entry version="1.0" value="dashed" description="A series of square-ended dashes." />
    <entry version="1.0" value="dotted" description="A series of round dots." />
    <entry version="1.0" value="double" description="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'.)" />
    <entry version="1.0" value="groove" description="Looks as if it were carved in the canvas. (This is typically achieved by creating a &quot;shadow&quot; from two colors that are slightly lighter and darker than the 'border-color'.)" />
    <entry version="3.0" value="hidden" description="Same as 'none', but has different behavior in the border conflict resolution rules for border-collapsed tables." />
    <entry version="1.0" value="inset" description="Looks as if the content on the inside of the border is sunken into the canvas. Treated as 'ridge' in border-collapsed tables." />
    <entry version="1.0" value="none" description="No border. Color and width are ignored (i.e., the border has width 0, unless the border is an image)" />
    <entry version="1.0" value="outset" description="Looks as if the content on the inside of the border is coming out of the canvas. Treated as 'groove' in border-collapsed tables." />
    <entry version="1.0" value="ridge" description="Looks as if it were coming out of the canvas." />
    <entry version="1.0" value="solid" description="A single line segment." />
  </CssPropertyValue>

  <CssProperty name="border-style" type="border-style" restriction="enum" version="1.0" syntax="td { $(name): solid; }" description="The style of the border around edges of an element." standard-reference="http://www.w3.org/TR/css3-background/#border-style" />

  <CssProperty name="border-left-style" ref="border-style" />

  <CssProperty name="border-top-style" ref="border-style" />

  <CssProperty name="border-right-style" ref="border-style" />

  <CssProperty name="border-bottom-style" ref="border-style" />

  <CssProperty name="border-radius" version="3.0" browsers="C,FF4,IE9,O10.5,S5" restriction="length, percentage" syntax="td { $(name): 3px 4px; }" description="The two length or percentage values of the 'border-*-radius' properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box." standard-reference="http://www.w3.org/TR/css3-background/#border-radius" />

  <CssProperty name="border-top-left-radius" browsers="C,FF4,IE9,O10.5,S5" ref="border-radius" syntax="td { $(name): 4px; }" />

  <CssProperty name="border-top-right-radius" browsers="C,FF4,IE9,O10.5,S5" ref="border-top-left-radius" />

  <CssProperty name="border-bottom-left-radius" browsers="C,FF4,IE9,O10.5,S5" ref="border-top-left-radius" />

  <CssProperty name="border-bottom-right-radius" browsers="C,FF4,IE9,O10.5,S5" ref="border-top-left-radius" />

  <CssProperty name="border-image-source" version="3.0" browsers="C,IE11,FF13" restriction="url" type="border-image-source" syntax="aside { $(name): url(image.png); }" description="Specifies an image to use instead of the border styles given by the 'border-style' properties and as an additional background layer for the element. If the value is 'none' or if the image cannot be displayed, the border styles will be used." standard-reference="http://www.w3.org/TR/css3-background/#border-image-source" />

  <CssPropertyValue type="border-image-source">
    <entry value="none" />
    <entry value="url()" />
  </CssPropertyValue>

  <CssProperty name="border-image-slice" version="3.0" browsers="C,IE11,FF12" restriction="number, percentage" type="border-image-slice" syntax="div { $(name): 10%; }" description="The four 'border-image-slice' values represent inward offsets from the top, right, bottom, and left edges of the image respectively, dividing it into nine regions: four corners, four edges and a middle. The middle image part is discarded (treated as fully transparent) unless the 'fill' keyword is present. (It is drawn over the background; see the border-image drawing process.) If the fourth number/percentage is absent, it is the same as the second. If the third one is also absent, it is the same as the first. If the second one is also absent, it is the same as the first." standard-reference="http://www.w3.org/TR/css3-background/#border-image-slice" />

  <CssPropertyValue type="border-image-slice">
    <entry value="fill" description="Causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)" />
  </CssPropertyValue>

  <CssProperty name="border-image-width" version="3.0" browsers="FF13,IE11" restriction="length, percentage, number" type="border-image-width" syntax=".album { $(name): 4px; }" description="The four values of 'border-image-width' specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively." standard-reference="http://www.w3.org/TR/css3-background/#border-image-slice" />

  <CssPropertyValue type="border-image-width">
    <entry value="auto" description="If 'auto' is specified then the border image width is the intrinsic width or height (whichever is applicable) of the corresponding image slice. If the image does not have the required intrinsic dimension then the corresponding border-width is used instead." />
  </CssPropertyValue>

  <CssProperty name="border-image-outset" version="3.0" browsers="FF13,IE11" restriction="length, number" syntax="div { $(name): 3px; }" description="The values specify the amount by which the border image area extends beyond the border box on the top, right, bottom, and left sides respectively. If the fourth value is absent, it is the same as the second. If the third one is also absent, it is the same as the first. If the second one is also absent, it is the same as the first. Numbers represent multiples of the corresponding border-width." standard-reference="http://www.w3.org/TR/css3-background/#border-image-outset" />

  <CssProperty name="border-image-repeat" version="3.0" browsers="FF13,IE11" restriction="enum" type="border-image-repeat" syntax="td { $(name): stretch; }" description="Specifies how the images for the sides and the middle part of the border image are scaled and tiled. If the second keyword is absent, it is assumed to be the same as the first." standard-reference="http://www.w3.org/TR/css3-background/#border-image-repeat" />

  <CssPropertyValue type="border-image-repeat">
    <entry value="stretch" description="The image is stretched to fill the area." />
    <entry value="repeat" description="The image is tiled (repeated) to fill the area." />
    <entry value="round" description="The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does." />
    <entry value="space" description="The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles." />
  </CssPropertyValue>

  <CssProperty name="border-image" version="3.0" browsers="C,FF13,IE11" restriction="length, percentage, number, url, enum" type="border-image-source, border-image-slice, border-image-width, border-image-repeat" syntax="td { $(name): url(border.png) 30 30 round;}" description="Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values." standard-reference="http://www.w3.org/TR/css3-background/#border-image" />

  <CssProperty name="box-decoration-break" version="3.0" browsers="O11" restriction="enum" syntax="div { $(name): clone; }" description="Specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding." standard-reference="http://www.w3.org/TR/css3-background/#box-decoration-break">
    <entry value="clone" description="Each box is independently wrapped with the border and padding. The 'border-radius' and 'border-image' and 'box-shadow', if any, are applied to each box independently. The background is drawn independently in each box of the element. A no-repeat background image will thus be rendered once in each box of the element." />
    <entry value="slice" description="No border and no padding are inserted at the break. No box-shadow is drawn at the broken edge; 'border-radius' has no effect at its corners; and the 'border-image' is rendered for the whole box as if it were unbroken. The effect is as though the element were rendered with no break present, and then sliced by the break afterward." />
  </CssProperty>

  <CssPropertyValue type="shadow">
    <entry value="none" />
    <entry value="inset" description="Changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it)." />
  </CssPropertyValue>

  <CssProperty name="box-shadow" version="3.0" browsers="C,FF9,IE9,O11.6,S5.1" restriction="length, color, enum" type="shadow" syntax="div { $(name): rgba(0,0,0,0.4) 10px 10px inset; }" description="Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0; omitted colors are a user agent chosen color." standard-reference="http://www.w3.org/TR/css3-background/#box-shadow" />
</CssModule>