box.html

CSS lets learn this step by step...

class="propinst-padding-right">'padding-right'</span></a>, <a href="box.html#propdef-padding-bottom" class="noxref"><span
class="propinst-padding-bottom">'padding-bottom'</span></a>, and <a href="box.html#propdef-padding-left" class="noxref"><span
class="propinst-padding-left">'padding-left'</span></a> at the same place
in the style sheet.

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

<P> The surface color or image of the padding area is specified via
the <a href="colors.html#propdef-background" class="noxref"><span class="propinst-background">'background'</span></a> property:

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
H1 { 
  background: white; 
  padding: 1em 2em;
} 
</PRE>

<P> The example above specifies a '1em' vertical padding (<a href="box.html#propdef-padding-top" class="noxref"><span
class="propinst-padding-top">'padding-top'</span></a> and <a href="box.html#propdef-padding-bottom" class="noxref"><span
class="propinst-padding-bottom">'padding-bottom'</span></a>) and a '2em'
horizontal padding (<a href="box.html#propdef-padding-right" class="noxref"><span
class="propinst-padding-right">'padding-right'</span></a> and <a href="box.html#propdef-padding-left" class="noxref"><span
class="propinst-padding-left">'padding-left'</span></a>). The 'em' unit is
<a href="syndata.html#absrel-units">relative</a> 
to the element's font size: '1em' is equal to the size of the
font in use.
</div>

<H2>8.5 <a name="border-properties">Border properties</a></H2>

<P>The border properties specify the width, color, and style of the <a
href="#box-border-area">border area</a> of a box. These
properties apply to all elements.


<div class="note"><P>
<em><strong>Note.</strong>
Notably for HTML, 
user agents may render borders for certain elements (e.g.,
buttons, menus, etc.) differently than for
"ordinary" elements.
</em>
</div>

<H3>8.5.1 <a name="border-width-properties">Border width</A>: <a href="box.html#propdef-border-top-width" class="noxref"><span
class="propinst-border-top-width">'border-top-width'</span></a>, <a href="box.html#propdef-border-right-width" class="noxref"><span
class="propinst-border-right-width">'border-right-width'</span></a>, <a href="box.html#propdef-border-bottom-width" class="noxref"><span
class="propinst-border-bottom-width">'border-bottom-width'</span></a>,
<a href="box.html#propdef-border-left-width" class="noxref"><span class="propinst-border-left-width">'border-left-width'</span></a>, and
<a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a></H3>

<P>The border width properties specify the width of the <a
href="#box-border-area">border area</a>.  The properties
defined in this section refer to the <span class="index-def"
title="&lt;border-width&gt;::definition of"><a
name="value-def-border-width"
class="value-def"><strong>&lt;border-width&gt;</strong></a></span>
value type, which may take one of the following values:</P>

<dl>
<dt><strong>thin</strong>
<dd>A thin border.
<dt><strong>medium</strong>
<dd>A medium border.
<dt><strong>thick</strong>
<dd>A thick border.
<dt><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><strong>&lt;length&gt;</strong></span></a>
<dd>The border's thickness has an explicit value. Explicit
border widths cannot be negative.
</dl>

<P>The interpretation of the first three values depends on the user
agent. The following relationships must hold, however:

<P>'thin' &lt;='medium' &lt;= 'thick'.  

<P>Furthermore, these widths must be constant throughout a document.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top-width'"><a name="propdef-border-top-width" class="propdef-title"><strong>'border-top-width'</strong></a></span>, <span class="index-def" title="'border-right-width'"><a name="propdef-border-right-width" class="propdef-title"><strong>'border-right-width'</strong></a></span>, <span class="index-def" title="'border-bottom-width'"><a name="propdef-border-bottom-width" class="propdef-title"><strong>'border-bottom-width'</strong></a></span>, <span class="index-def" title="'border-left-width'"><a name="propdef-border-left-width" class="propdef-title"><strong>'border-left-width'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-width" class="noxref"><span class="value-inst-border-width">&lt;border-width&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>medium
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>These properties set the width of the top, right, bottom,
and left border of a box.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-width'"><a name="propdef-border-width" class="propdef-title"><strong>'border-width'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="box.html#value-def-border-width" class="noxref"><span class="value-inst-border-width">&lt;border-width&gt;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>see individual properties
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P> This property is a shorthand property for setting
<a href="box.html#propdef-border-top-width" class="noxref"><span class="propinst-border-top-width">'border-top-width'</span></a>, 
<a href="box.html#propdef-border-right-width" class="noxref"><span class="propinst-border-right-width">'border-right-width'</span></a>, 
<a href="box.html#propdef-border-bottom-width" class="noxref"><span class="propinst-border-bottom-width">'border-bottom-width'</span></a>,
 and
<a href="box.html#propdef-border-left-width" class="noxref"><span class="propinst-border-left-width">'border-left-width'</span></a> at
the same place in the style sheet. 

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

<div class="example"><P style="display:none">Example(s):</P><P>
In the examples below, the comments indicate the resulting widths
of the top, right, bottom, and left borders:

<PRE>
H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */
</PRE>
</div>

<H3>8.5.2 <A name="border-color-properties">Border color</A>:
<a href="box.html#propdef-border-top-color" class="noxref"><span class="propinst-border-top-color">'border-top-color'</span></a>,
<a href="box.html#propdef-border-right-color" class="noxref"><span class="propinst-border-right-color">'border-right-color'</span></a>,
<a href="box.html#propdef-border-bottom-color" class="noxref"><span class="propinst-border-bottom-color">'border-bottom-color'</span></a>,
<a href="box.html#propdef-border-left-color" class="noxref"><span class="propinst-border-left-color">'border-left-color'</span></a>, and
<a href="box.html#propdef-border-color" class="noxref"><span class="propinst-border-color">'border-color'</span></a>
</H3>

<P>The border color properties specify the color of a box's border.

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top-color'"><a name="propdef-border-top-color" class="propdef-title"><strong>'border-top-color'</strong></a></span>, <span class="index-def" title="'border-right-color'"><a name="propdef-border-right-color" class="propdef-title"><strong>'border-right-color'</strong></a></span>, <span class="index-def" title="'border-bottom-color'"><a name="propdef-border-bottom-color" class="propdef-title"><strong>'border-bottom-color'</strong></a></span>, <span class="index-def" title="'border-left-color'"><a name="propdef-border-left-color" class="propdef-title"><strong>'border-left-color'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>the value of the 'color' property
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-color'"><a name="propdef-border-color" class="propdef-title"><strong>'border-color'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="syndata.html#value-def-color" class="noxref"><span class="value-inst-color">&lt;color&gt;</span></a>{1,4} | transparent | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>see individual properties
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>The <a href="box.html#propdef-border-color" class="noxref"><span class="propinst-border-color">'border-color'</span></a>
property sets the color of the four borders. Values have the following
meanings:</p>

<dl>
<dt><span class="index-inst" title="&lt;color&gt;"><a name="x46" href="syndata.html#value-def-color" class="noxref"><span
class="value-inst-color"><strong>&lt;color&gt;</strong></span></a></span>
<dd>Specifies a color value.
<dt><strong>transparent</strong>
<dd>The border is transparent (though it may have width).
</dl>


<P>The <a href="box.html#propdef-border-color" class="noxref"><span class="propinst-border-color">'border-color'</span></a>
property can have from one to four values, and the values are set on
the different sides as for <a href="box.html#propdef-border-width" class="noxref"><span
class="propinst-border-width">'border-width'</span></a>.

<P>If an element's border color is not specified 
with a border property, user agents must use the value
of the element's <a href="colors.html#propdef-color" class="noxref"><span
class="propinst-color">'color'</span></a> property as the 
<a href="cascade.html#computed-value">computed value</a> 
for the border color.

<div class="example"><P style="display:none">Example(s):</P>
<P>In this  example, the border will be a solid black line.
<PRE>
P { 
  color: black; 
  background: white; 
  border: solid;
}
</PRE>
</div>

<H3>8.5.3 <A name="border-style-properties">Border style</a>: