<?xml version="1.0"?>
<!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
               "http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
]>
<refentry id="chap-css-properties">
<refmeta>
<refentrytitle>GTK+ CSS</refentrytitle>
<manvolnum>3</manvolnum>
<refmiscinfo>GTK Library</refmiscinfo>
</refmeta>

<refnamediv>
<refname>GTK+ CSS</refname>
<refpurpose>
GTK+ CSS Properties
</refpurpose>
</refnamediv>


<!--
Formatting conventions:
We use

‑ U+2011 Non-breaking Hyphen
  U+00A0 No-break Space

to control line breaks in the Name and Value columns.
We use

〈 U+2329 Left-pointing Angle Bracket
〉 U+232A Right-pointing Angle Bracket

for indicating non-terminals in syntax productions.

We use <literallayout> for syntax productions, and each line is put in a <code>
(the latter is a workaround for deficiences in the developer.gnome.org post-processing).
-->

<refsect1 id="css-properties">
  <title>Supported CSS Properties</title>

    <para>
      GTK+ supports CSS properties and shorthands as far as they can be applied
      in the context of widgets, and adds its own properties only when needed.
      All GTK+-specific properties have a -gtk prefix.
    </para>

    <para>
      All properties support the following keywords: inherit, initial, unset, with
      the same meaning as in <ulink url="https://www.w3.org/TR/css3-cascade/#defaulting-keywords">CSS</ulink>.
    </para>

    <para>
      The following basic datatypes are used throughout:
    </para>

<literallayout><code>〈length〉 = 〈number〉 [ px | pt | em | ex |rem | pc | in | cm | mm ] | 〈calc expression〉</code>
<code>〈percentage〉 = 〈number〉 % | 〈calc expression〉</code>
<code>〈angle〉 = 〈number〉 [ deg | grad | turn ] | 〈calc expression〉</code>
<code>〈time〉 = 〈number〉 [ s | ms ] | 〈calc expression〉</code>
</literallayout>

    <para>
      Length values with the em or ex units are resolved using the font
      size value, unless they occur in setting the font-size itself, in
      which case they are resolved using the inherited font size value.
    </para>

    <para>
      The rem unit is resolved using the initial font size value, which is
      not quite the same as the CSS definition of rem.
    </para>

    <para>
      Whereever a number is allowed, GTK+ also accepts a Windows-specific
      theme size:
    </para>

<literallayout>
<code>〈win32 theme size〉 = 〈win32 size〉| 〈win32 part size〉</code>
<code>〈win32 size〉 = -gtk-win32-size ( 〈theme name〉, 〈metric id〉 )</code>
<code>〈win32 part size〉 = [ -gtk-win32-part-width | -gtk-win32-part-height |</code>
<code>                         -gtk-win32-part-border-top | -gtk-win32-part-border-right |</code>
<code>                         -gtk-win32-part-border-bottom | -gtk-win32-part-border-left ] ( 〈theme name〉 , 〈integer〉 , 〈integer〉 )</code>
</literallayout>

<literallayout><code>〈calc expression〉 = calc( 〈calc sum〉 )</code>
<code>〈calc sum〉 = 〈calc product〉 [ [ + | - ] 〈calc product〉 ]*</code>
<code>〈calc product〉 = 〈calc value〉 [ * 〈calc value〉 | / 〈number〉 ]*</code>
<code>〈calc value〉 = 〈number〉 | 〈length〉 | 〈percentage〉 | 〈angle〉 | 〈time〉 | ( 〈calc sum〉 )</code>
</literallayout>

    <para>
      The calc() notation adds considerable expressive power. There are limits
      on what types can be combined in such an expression (e.g. it does not make
      sense to add a number and a time). For the full details, see the
      <ulink url="https://www.w3.org/TR/css3-values/#calc-notation">CSS3 Values and
      Units</ulink> spec.
    </para>

    <para>
      A common pattern among shorthand properties (called 'four sides') is one
      where one to four values can be specified, to determine a value for each
      side of an area. In this case, the specified values are interpreted as
      follows:
      <variablelist>
        <varlistentry>
          <term>4 values: </term><listitem>top right bottom left</listitem>
        </varlistentry>
        <varlistentry>
          <term>3 values: </term><listitem>top horizontal bottom</listitem>
        </varlistentry>
        <varlistentry>
          <term>2 values: </term><listitem>vertical horizontal</listitem>
        </varlistentry>
        <varlistentry>
          <term>1 value: </term><listitem>all</listitem>
        </varlistentry>
      </variablelist>
    </para>

      <table pgwide="1">
        <title>Color Properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>rgba(1,1,1,1)</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-color">CSS2</ulink>,
                    <ulink url="https://www.w3.org/TR/css3-color/#foreground">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>opacity</entry>
              <entry><code>〈alpha value〉</code></entry>
              <entry><code>1</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-color/#opacity">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

      <para>
        The color property specifies the color to use for text, icons and other
        foreground rendering. The opacity property specifies the opacity that is
        used to composite the widget onto its parent widget.
      </para>

      <table pgwide="1">
        <title>Font Properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>font‑family</entry>
              <entry><code>〈family name〉 [ , 〈family name〉 ]*</code></entry>
              <entry>gtk-font-name setting</entry>
              <entry>✓</entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-family">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-fonts/#font-family-prop">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>font‑size</entry>
              <entry><code>〈absolute size〉 | 〈relative size〉 | 〈length〉 | 〈percentage〉</code></entry>
              <entry>gtk-font-name setting</entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-size-props">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-fonts/#font-size-prop">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>font‑style</entry>
              <entry><code>normal | oblique | italic</code></entry>
              <entry><code>normal</code></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-fonts/#font-style-prop">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>font‑variant</entry>
              <entry><code>normal | small-caps</code></entry>
              <entry><code>normal</code></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-variant">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-fonts/#descdef-font-variant">CSS3</ulink></entry>
              <entry>only CSS2 values supported</entry>
            </row>
            <row>
              <entry>font‑weight</entry>
              <entry><code>normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</code></entry>
              <entry><code>normal</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-weight">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-fonts/#font-weight-prop">CSS3</ulink></entry>
              <entry>normal is synonymous with 400, bold with 700</entry>
            </row>
            <row>
              <entry>font‑stretch</entry>
              <entry><code>ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded</code></entry>
              <entry><code>normal</code></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-fonts/#font-stretch-prop">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑dpi</entry>
              <entry><code>〈number〉</code></entry>
              <entry>screen resolution</entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>font</entry>
              <entry><code>[ 〈font-style〉 || 〈font-variant〉 || 〈font-weight〉 || 〈font-stretch〉 ]? 〈font-size〉 〈font-family〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#font-shorthand">CSS2</ulink>,
<ulink url="https://www.w3.org/TR/css3-fonts/#font-prop">CSS3</ulink></entry>
              <entry>CSS allows line-height, etc</entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈absolute size〉 = xx-small | x-small | small | medium | large | x-large | xx-large</code>
<code>〈relative size〉 = larger | smaller</code>
</literallayout>

      <para>
        The font properties determine the font to use for rendering text. Relative
        font sizes and weights are resolved relative to the inherited value for
        these properties.
      </para>

      <table pgwide="1">
        <title>Text caret properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>caret-color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-ui/#caret-color">CSS3</ulink></entry>
              <entry>CSS allows an auto value</entry>
            </row>
            <row>
              <entry>-gtk-secondary-caret-color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry></entry>
              <entry>Used for the secondary caret in bidirectional text</entry>
            </row>
          </tbody>
        </tgroup>
      </table>

      <para>
        The caret properties provide a way to change the appearance of the insertion
        caret in editable text.
      </para>

      <table pgwide="1">
        <title>Text decoration properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>letter‑spacing</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-text/#letter-spacing">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>text‑decoration‑line</entry>
              <entry><code>none | underline | line-through</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/text.html#propdef-text-decoration">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-line-property">CSS3</ulink></entry>
              <entry>CSS allows overline</entry>
            </row>
            <row>
              <entry>text‑decoration‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-color-property">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>text‑decoration‑style</entry>
              <entry><code>solid | double | wavy</code></entry>
              <entry><code>solid</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-style-property">CSS3</ulink></entry>
              <entry>CSS allows dashed and dotted</entry>
            </row>
            <row>
              <entry>text‑shadow</entry>
              <entry><code>none | 〈shadow〉</code></entry>
              <entry><code>none</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>text‑decoration</entry>
              <entry><code>〈text-decoration-line〉 || 〈text-decoration-style〉 || 〈text-decoration-color〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/css-text-decor-3/#text-decoration-property">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈shadow〉 = 〈length〉 〈length〉 〈color〉?</code>
</literallayout>

      <para>
        The text decoration properties determine whether to apply extra decorations
        when rendering text.
      </para>

      <table pgwide="1">
        <title>Icon Properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>‑gtk‑icon‑source</entry>
              <entry><code>builtin | 〈image〉 | none</code></entry>
              <entry><code>builtin</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑icon‑transform</entry>
              <entry><code>none | 〈transform〉+</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑icon‑style</entry>
              <entry><code>requested | regular | symbolic</code></entry>
              <entry><code>requested</code></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
              <entry>Determines the preferred style for application-loaded icons</entry>
            </row>
            <row>
              <entry>‑gtk‑icon‑theme</entry>
              <entry><code>〈name〉</code></entry>
              <entry>current icon theme</entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
              <entry>The icon theme to use with -gtk-icontheme(). Since 3.20</entry>
            </row>
            <row>
              <entry>‑gtk‑icon‑palette</entry>
              <entry><code>〈color palette〉</code></entry>
              <entry><code>default</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry></entry>
              <entry>Used to recolor symbolic icons (both application-loaded and from -gtk-icontheme()). Since 3.20</entry>
            </row>
            <row>
              <entry>‑gtk‑icon‑shadow</entry>
              <entry><code>none | 〈shadow〉</code></entry>
              <entry><code>none</code></entry>
              <entry>✓</entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑icon‑effect</entry>
              <entry><code>none | highlight | dim</code></entry>
              <entry><code>none</code></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈transform〉 = matrix( 〈number〉 [ , 〈number〉 ]{5} ) | translate( 〈length〉, 〈length〉 ) | translateX( 〈length〉 ) | translateY( 〈length〉 ) |</code>
<code>                scale( 〈number〉[ , 〈number〉 ]? ) | scaleX( 〈number〉 ) | scaleY( 〈number〉 ) | rotate( 〈angle〉 ) | skew( 〈angle〉 [ , 〈angle〉 ]? ) |</code>
<code>                skewX( 〈angle〉 ) |  skewY( 〈angle〉 )</code>
<code>〈color palette〉 = default | 〈name〉 〈color〉 [ , 〈name〉 〈color〉 ]*</code>
</literallayout>

      <para>
        The -gtk-icon-source property is used by widgets that are rendering 'built-in'
        icons, such as arrows, expanders, spinners, checks or radios.
      </para>

      <para>
        The -gtk-icon-style property determines the preferred style for
        application-provided icons.
      </para>

      <para>
        The -gtk-icon-transform and -gtk-icon-shadow properties affect the rendering
        of both built-in and application-provided icons.
      </para>

      <para>
        -gtk-icon-palette defines a color palette for recoloring symbolic
        icons. The recognized names for colors in symbolic icons are error,
        warning and success. The default palette maps these three names to
        symbolic colors with the names @error_color, @warning_color and
        @error_color.
      </para>

      <table pgwide="1">
        <title>Box properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>min‑width</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#min-width">CSS3</ulink></entry>
              <entry>CSS allows percentages</entry>
            </row>
            <row>
              <entry>min‑height</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#propdef-min-height">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#min-height">CSS3</ulink></entry>
              <entry>CSS allows percentages</entry>
            </row>
            <row>
              <entry>margin‑top</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-top">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#margin-top">CSS3</ulink></entry>
              <entry>CSS allows percentages or auto</entry>
            </row>
            <row>
              <entry>margin‑right</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-right">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#margin-right">CSS3</ulink></entry>
              <entry>CSS allows percentages or auto</entry>
            </row>
            <row>
              <entry>margin‑bottom</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-bottom">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#margin-bottom">CSS3</ulink></entry>
              <entry>CSS allows percentages or auto</entry>
            </row>
            <row>
              <entry>margin‑left</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin-left">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#margin-left">CSS3</ulink></entry>
              <entry>CSS allows percentages or auto</entry>
            </row>
            <row>
              <entry>padding‑top</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-top">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#padding-top">CSS3</ulink></entry>
              <entry>CSS allows percentages</entry>
            </row>
            <row>
              <entry>padding‑right</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-right">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#padding-right">CSS3</ulink></entry>
              <entry>CSS allows percentages</entry>
            </row>
            <row>
              <entry>padding‑bottom</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-bottom">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#padding-bottom">CSS3</ulink></entry>
              <entry>CSS allows percentages</entry>
            </row>
            <row>
              <entry>padding‑left</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding-left">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#padding-left">CSS3</ulink></entry>
              <entry>CSS allows percentages</entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>margin</entry>
              <entry><code>〈length〉{1,4}</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-margin">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#margin">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>
            <row>
              <entry>padding</entry>
              <entry><code>〈length〉{1,4}</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-padding">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-box/#padding">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>
          </tbody>
        </tgroup>
      </table>

      <table pgwide="1">
        <title>Border properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>border‑top‑width</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
              <entry>CSS allows other values</entry>
            </row>
            <row>
              <entry>border‑right‑width</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/css3-background/#the-border-width">CSS3</ulink></entry>
              <entry>CSS allows other values</entry>
            </row>
            <row>
              <entry>border‑bottom‑width</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
              <entry>CSS allows other values</entry>
            </row>
            <row>
              <entry>border‑right‑width</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
              <entry>CSS allows other values</entry>
            </row>
            <row>
              <entry>border‑top‑style</entry>
              <entry><code>〈border style〉</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑right‑style</entry>
              <entry><code>〈border style〉</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑bottom‑style</entry>
              <entry><code>〈border style〉</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑left‑style</entry>
              <entry><code>〈border style〉</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑top‑right‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-right-radius">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑bottom‑right‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-right-radius">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑bottom‑left‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-left-radius">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑top‑left‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-left-radius">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-radius">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑top‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top-color">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑right‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right-color">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑bottom‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom-color">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑left‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left-color">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-color">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑image‑source</entry>
              <entry><code>〈image〉 | none</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#the-border-image-source">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑image‑repeat</entry>
              <entry><code>〈border repeat〉{1,2}</code></entry>
              <entry><code>stretch</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-repeat">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑image‑slice</entry>
              <entry><code>[ 〈number〉 | 〈percentage〉 ]{1,4} &amp;&amp; fill?</code></entry>
              <entry><code>100%</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-slice">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>
            <row>
              <entry>border‑image‑width</entry>
              <entry><code>[ 〈length〉 | 〈number〉 | 〈percentage〉 | auto ]{1,4}</code></entry>
              <entry><code>1</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR//css3-background/#the-border-image-width">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>

          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>border‑width</entry>
              <entry><code>〈length〉{1,4}</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-width">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>
            <row>
              <entry>border‑style</entry>
              <entry><code>〈border style〉{1,4}</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#the-border-style">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>
            <row>
              <entry>border‑color</entry>
              <entry><code>〈color〉{1,4}</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#border-color">CSS3</ulink></entry>
              <entry>a 'four sides' shorthand</entry>
            </row>
            <row>
              <entry>border‑top</entry>
              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-top">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#border-top">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑left</entry>
              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-left">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#border-left">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑bottom</entry>
              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-bottom">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#border-bottom">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑right</entry>
              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#border-right">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border</entry>
              <entry><code>〈length〉 || 〈border style〉 || 〈color〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#propdef-border-right">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#border">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑radius</entry>
              <entry><code>[ 〈length〉 | 〈percentage〉 ]{1,4} [ / [ 〈length〉 | 〈percentage> ]{1,4} ]?</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#border-radius">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>border‑image</entry>
              <entry><code>〈border-image-source〉 || 〈border-image-slice〉 [ / 〈border-image-width〉 | / 〈border-image-width〉? / 〈border-image-outset〉 ]? || 〈border-image-repeat〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#border-image">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈border style〉 = none | solid | inset | outset | hidden | dotted | dashed | double | groove | ridge</code>
<code>〈corner radius〉 = [ 〈length〉 | 〈percentage〉 ]{1,2}</code>
</literallayout>

      <table pgwide="1">
        <title>Outline properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>outline‑style</entry>
              <entry><code>none | solid | inset | outset | hidden | dotted | dashed | double  | groove | ridge</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-style">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-ui/#outline-style">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>outline‑width</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-width">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-ui/#outline-width">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>outline‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>currentColor</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline-color">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-ui/#outline-color">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>outline‑offset</entry>
              <entry><code>〈length〉</code></entry>
              <entry><code>0px</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-ui/#outline-offset">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑outline‑top‑left‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑outline‑top‑right‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑outline‑bottom‑right‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑outline‑bottom‑left‑radius</entry>
              <entry><code>〈corner radius〉</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>outline</entry>
              <entry><code>〈outline-color〉 || 〈outline-style〉 || 〈outline-width〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/ui.html#propdef-outline">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-ui/#propdef-outline">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>‑gtk‑outline‑radius</entry>
              <entry><code>[ 〈length〉|〈percentage〉 ]{1,4} [ / [〈length〉 | 〈percentage> ]{1,4} ]?</code></entry>
              <entry>see individual properties</entry>
              <entry></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

      <para>
        GTK+ uses the CSS outline properties to render the 'focus rectangle'.
      </para>

      <table pgwide="1">
        <title>Background properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>background‑color</entry>
              <entry><code>〈color〉</code></entry>
              <entry><code>rgba(0,0,0,0)</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-color">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#background-color">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>background‑clip</entry>
              <entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
              <entry><code>border-box</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#background-clip">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>background‑origin</entry>
              <entry><code>〈box〉 [ , 〈box〉 ]*</code></entry>
              <entry><code>padding-box</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#background-origin">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>background‑size</entry>
              <entry><code>〈bg-size〉 [ , 〈bg-size〉 ]*</code></entry>
              <entry><code>auto</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#background-size">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>background‑position</entry>
              <entry><code>〈position〉 [ , 〈position〉 ]*</code></entry>
              <entry><code>0</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-position">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#background-position">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>background‑repeat</entry>
              <entry><code>〈bg-repeat 〉[ , 〈bg-repeat〉 ]*</code></entry>
              <entry><code>repeat</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-repeat">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#background-repeat">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>background‑image</entry>
              <entry><code>〈bg-image〉[ , 〈bg-image〉 ]*</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background-image">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#background-image">CSS3</ulink></entry>
              <entry>not supported: urls without quotes, CSS radial gradients, colors in crossfades</entry>
            </row>
            <row>
              <entry>background-blend-mode</entry>
              <entry><code>〈blend-mode〉 [ , 〈blend-mode〉 ]*</code></entry>
              <entry><code>normal</code></entry>
              <entry></entry>
              <entry></entry>
              <entry></entry>
              <entry>only affects multiple backgrounds</entry>
            </row>
            <row>
              <entry>box‑shadow</entry>
              <entry><code>none | 〈box shadow〉 [ , 〈box shadow〉 ]*</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry>✓</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-background/#box-shadow">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry><para>background</para></entry>
              <entry><code>[ 〈bg-layer〉 , ]* 〈final-bg-layer〉</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/2011/REC-CSS2-20110607/colors.html#propdef-background">CSS2</ulink>,
                     <ulink url="https://www.w3.org/TR/css3-background/#background">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈box〉 = border-box | padding-box | content-box</code>
<code>〈bg-size〉 = [ 〈length〉 | 〈percentage〉 | auto ]{1,2} | cover | contain</code>
<code>〈position〉 = [ left | right | center | top | bottom | 〈percentage〉 | 〈length〉 ]{1,2,3,4}</code>
<code>〈bg-repeat〉 = repeat-x | repeat-y | [ no-repeat | repeat | round | space ]{1,2}</code>
<code>〈bg-image〉 = 〈image〉 | none</code>
<code>〈bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉</code>
<code>〈final-bg-layer〉 = 〈bg-image〉 || 〈position〉 [ / 〈bg-size〉 ]? || 〈bg-repeat〉 || 〈box〉 || 〈box〉|| 〈color〉</code>
<code>〈blend-mode〉 = color || color-burn || color-dodge || darken || difference || exclusion || hard-light || hue || lighten || luminosity || multiply || normal || overlay || saturate || screen || soft-light</code>
<code>〈box shadow〉 = inset? &amp;&amp; 〈length〉{2,4}? &amp;&amp; 〈color〉?</code>
</literallayout>

      <para>
        As in CSS, the background color is rendered underneath all the background image layers, so it will only be visible if
        background images are absent or have transparency.
      </para>

      <para>
        Alternatively, multiple backgrounds can be blended using the <code>background-blend-mode</code> property.
      </para>

      <table pgwide="1">
        <title>Transition properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>transition‑property</entry>
              <entry><code>none | all | 〈property name〉 [ , 〈property name〉 ]*</code></entry>
              <entry><code>all</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-property">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>transition‑duration</entry>
              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
              <entry><code>0s</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-duration">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>transition‑timing‑function</entry>
              <entry><code>〈single‑timing‑function〉[ , 〈single‑timing‑function〉 ]*</code></entry>
              <entry><code>ease</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-timing-function">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>transition‑delay</entry>
              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
              <entry><code>0s</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition-delay">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>transition</entry>
              <entry><code>〈single-transition〉 [ , 〈single-transition〉 ]*</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-transitions/#transition">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈single-timing-function〉 = ease | linear | ease-in | ease-out | ease-in-out |</code>
<code>                             step-start | step-end | steps( 〈integer〉 [ , [ start | end ] ]? ) |</code>
<code>                             cubic-bezier( 〈number〉, 〈number〉, 〈number〉, 〈number〉 )</code>
<code>〈single-transition〉 = [ none | 〈property name〉 ] || 〈time〉 || 〈single-transition-timing-function〉 || 〈time〉</code>
</literallayout>

      <table pgwide="1">
        <title>Animation properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>animation‑name</entry>
              <entry><code>〈single-animation-name〉 [ , 〈single-animation-name〉 ]*</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-name">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑duration</entry>
              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
              <entry><code>0s</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-duration">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑timing‑function</entry>
              <entry><code>〈single‑timing‑function〉 [ , 〈single‑timing‑function〉 ]*</code></entry>
              <entry><code>ease</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-timing-function">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑iteration-count</entry>
              <entry><code>〈single‑animation‑iteration‑count〉 [ , 〈single‑animation‑iteration‑count〉 ]*</code></entry>
              <entry><code>1</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-iteration-count">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑direction</entry>
              <entry><code>〈single‑animation‑direction〉 [ , 〈single‑animation‑direction〉 ]*</code></entry>
              <entry><code>normal</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-direction">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑play‑state</entry>
              <entry><code>〈single‑animation‑play‑state〉 [ , 〈single‑animation‑play‑state〉 ]*</code></entry>
              <entry><code>running</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-play-state">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑delay</entry>
              <entry><code>〈time〉 [ , 〈time〉 ]*</code></entry>
              <entry><code>0s</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-delay">CSS3</ulink></entry>
              <entry></entry>
            </row>
            <row>
              <entry>animation‑fill‑mode</entry>
              <entry><code>〈single‑animation‑fill‑mode〉 [ , 〈single‑animation‑fill‑mode〉 ]*</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation-fill-mode">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
        <tgroup cols="5">
          <thead>
            <row><entry>Shorthand</entry><entry>Value</entry><entry>Initial</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>animation</entry>
              <entry><code>〈single‑animation〉 [ , 〈single‑animation〉]*</code></entry>
              <entry>see individual properties</entry>
              <entry><ulink url="https://www.w3.org/TR/css3-animations/#animation">CSS3</ulink></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

<literallayout><code>〈single-animation-name〉 = none | 〈property name〉</code>
<code>〈single-animation-iteration-count〉 = infinite | 〈number〉</code>
<code>〈single-animation-direction〉 = normal | reverse | alternate | alternate-reverse</code>
<code>〈single-animation-play-state〉 = running | paused</code>
<code>〈single-animation-fill-mode〉 = none | forwards | backwards | both</code>
<code>〈single-animation〉 = 〈single-animation-name〉 || 〈time〉 || 〈single-timing-function〉 || 〈time〉 ||</code>
<code>                       〈single-animation-iteration-count〉 || 〈single-animation-direction〉 || 〈single-animation-play-state〉 || 〈single-animation-fill-mode〉</code>
</literallayout>

      <table pgwide="1">
        <title>Key binding properties</title>
        <tgroup cols="7">
          <colspec colnum="4" align="center"/>
          <colspec colnum="5" align="center"/>
          <thead>
            <row><entry>Name</entry><entry>Value</entry><entry>Initial</entry><entry>Inh.</entry><entry>Ani.</entry><entry>Reference</entry><entry>Notes</entry></row>
          </thead>
          <tbody>
            <row>
              <entry>‑gtk‑key‑bindings</entry>
              <entry><code>none | 〈binding name〉 [ , 〈binding name〉 ]*</code></entry>
              <entry><code>none</code></entry>
              <entry></entry>
              <entry></entry>
              <entry></entry>
              <entry></entry>
            </row>
          </tbody>
        </tgroup>
      </table>

    <para>
      〈binding name〉 must have been assigned to a binding set with a @binding-set rule.
    </para>

</refsect1>
</refentry>
