box.html

CSS lets learn this step by step...

<a href="box.html#propdef-border-top-style" class="noxref"><span class="propinst-border-top-style">'border-top-style'</span></a>,
<a href="box.html#propdef-border-right-style" class="noxref"><span class="propinst-border-right-style">'border-right-style'</span></a>,
<a href="box.html#propdef-border-bottom-style" class="noxref"><span class="propinst-border-bottom-style">'border-bottom-style'</span></a>,
<a href="box.html#propdef-border-left-style" class="noxref"><span class="propinst-border-left-style">'border-left-style'</span></a>, and
<a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">'border-style'</span></a></H3>

<P>The border style properties specify the line style of a box's
border (solid, double, dashed, etc.). The properties defined in this
section refer to the <span class="index-def"
title="&lt;border-style&gt;, definition of"><a
name="value-def-border-style"><strong>&lt;border-style&gt;</strong></a></span>
value type, which make take one of the following:</p>

<dl>
<dt><strong><span class="index-def" title="'none'::as border style"><a name="value-def-bo-none" class="value-def">none</a></span></strong>
<dd>No border. This value forces
the computed value of <a href="box.html#propdef-border-width" class="noxref"><span class="propinst-border-width">'border-width'</span></a>
to be '0'. 
<dt><strong><span class="index-def" title="'hidden'"><a name="value-def-hidden" class="value-def">hidden</a></span></strong>
<dd>Same as 'none', except in terms of <a
href="tables.html#border-conflict-resolution">border conflict
resolution</a> for <a href="tables.html">table elements</a>.
<dt><strong><span class="index-def" title="'dotted'"><a name="value-def-dotted" class="value-def">dotted</a></span></strong>
<dd>The border is a series of dots.
<dt><strong><span class="index-def" title="'dashed'"><a name="value-def-dashed" class="value-def">dashed</a></span></strong>
<dd>The border is a series of short line segments.
<dt><strong><span class="index-def" title="'solid'"><a name="value-def-solid" class="value-def">solid</a></span></strong>
<dd>The border is a single line segment.
<dt><strong><span class="index-def" title="'double'"><a name="value-def-double" class="value-def">double</a></span></strong>
<dd>The border is two solid lines. The sum of
the two lines and the space between them
equals the value of <a href="box.html#propdef-border-width" class="noxref"><span
class="propinst-border-width">'border-width'</span></a>.
<dt><strong><span class="index-def" title="'groove'"><a name="value-def-groove" class="value-def">groove</a></span></strong>
<dd>The border looks as though it were carved
into the canvas.
<dt><strong><span class="index-def" title="'ridge'"><a name="value-def-ridge" class="value-def">ridge</a></span></strong>
<dd>The opposite of 'grove': the border
looks as though it were coming out of the canvas.
<dt><strong><span class="index-def" title="'inset'"><a name="value-def-inset" class="value-def">inset</a></span></strong>
<dd>The border makes the entire box look as though
it were embedded in the canvas.
<dt><strong><span class="index-def" title="'outset'"><a name="value-def-outset" class="value-def">outset</a></span></strong>
<dd>The opposite of 'inset': the
border makes the entire box look as though
it were coming out of the canvas.
</dl>

<P>All borders are drawn on top of the box's background. The color of
borders drawn for values of 'groove', 'ridge', 'inset', and 'outset'
depends on the element's <a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>
property.

<P><span class="index-inst" title="conformance"><a name="x58"
href="conform.html#conformance">Conforming HTML user agents</a></span> may
interpret 'dotted', 'dashed', 'double', 'groove', 'ridge',
'inset', and 'outset' to be 'solid'. 

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top-style'"><a name="propdef-border-top-style" class="propdef-title"><strong>'border-top-style'</strong></a></span>, <span class="index-def" title="'border-right-style'"><a name="propdef-border-right-style" class="propdef-title"><strong>'border-right-style'</strong></a></span>, <span class="index-def" title="'border-bottom-style'"><a name="propdef-border-bottom-style" class="propdef-title"><strong>'border-bottom-style'</strong></a></span>, <span class="index-def" title="'border-left-style'"><a name="propdef-border-left-style" class="propdef-title"><strong>'border-left-style'</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-style" class="noxref"><span class="value-inst-border-style">&lt;border-style&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>none
<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-style'"><a name="propdef-border-style" class="propdef-title"><strong>'border-style'</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-style" class="noxref"><span class="value-inst-border-style">&lt;border-style&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> The <a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">'border-style'</span></a>
property sets the style of the four borders. It 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> above.

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
#xy34 { border-style: solid dotted }
</PRE>
<P> In the above example, the horizontal borders will be 'solid' and
the vertical borders will be 'dotted'.
</div>

<P> Since the initial value of the border styles is 'none', no borders
will be visible unless the border style is set.

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

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border-top'"><a name="propdef-border-top" class="propdef-title"><strong>'border-top'</strong></a></span>, <span class="index-def" title="'border-right'"><a name="propdef-border-right" class="propdef-title"><strong>'border-right'</strong></a></span>, <span class="index-def" title="'border-bottom'"><a name="propdef-border-bottom" class="propdef-title"><strong>'border-bottom'</strong></a></span>, <span class="index-def" title="'border-left'"><a name="propdef-border-left" class="propdef-title"><strong>'border-left'</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#propdef-border-top-width" class="noxref"><span class="propinst-border-top-width">&lt;'border-top-width'&gt;</span></a> || <a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">&lt;'border-style'&gt;</span></a> || <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>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 is a shorthand property for setting the width, style, and
color of the top, right, bottom, and left border of a box.

<div class="example"><P style="display:none">Example(s):</P><P>
<PRE>
H1 { border-bottom: thick solid red }
</PRE>

<P> The above rule will set the width, style, and color of the border
<strong>below</strong> the H1 element. Omitted values are set to
their <a href="cascade.html#initial-value">initial values</a>. Since
the following rule does not specify a border color, the border will
have the color specified by the <a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">
'color'</span></a> property:

<PRE>
H1 { border-bottom: thick solid }
</PRE>
</div>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'border'"><a name="propdef-border" class="propdef-title"><strong>'border'</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#propdef-border-width" class="noxref"><span class="propinst-border-width">&lt;'border-width'&gt;</span></a> || <a href="box.html#propdef-border-style" class="noxref"><span class="propinst-border-style">&lt;'border-style'&gt;</span></a> || <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>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" class="noxref"><span class="propinst-border">'border'</span></a> property is a
shorthand property for setting the same width, color, and style for
all four borders of a box.  Unlike the shorthand <a href="box.html#propdef-margin" class="noxref"><span
class="propinst-margin">'margin'</span></a> and <a href="box.html#propdef-padding" class="noxref"><span
class="propinst-padding">'padding'</span></a> properties, the <a href="box.html#propdef-border" class="noxref"><span
class="propinst-border">'border'</span></a> property cannot set different
values on the four borders. To do so, one or more of the other border
properties must be used.

<div class="example"><P style="display:none">Example(s):</P><P>
For example, the first rule below is
equivalent to the set of four rules shown after it:

<PRE>
P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}
</PRE>
</div>

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

<div class="example"><P style="display:none">Example(s):</P><P>
Consider this example:
<PRE>
BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}
</PRE>

<P> In the above example, the color of the left border is black,
while the other borders are red. This is due to <a href="box.html#propdef-border-left" class="noxref"><span
class="propinst-border-left">'border-left'</span></a> setting the
width, style, and color. Since the color value is not given by the
<a href="box.html#propdef-border-left" class="noxref"><span class="propinst-border-left">'border-left'</span></a> property, it
will be taken from the <a href="colors.html#propdef-color" class="noxref"><span class="propinst-color">'color'</span></a>
property. The fact that the <a href="colors.html#propdef-color" class="noxref"><span
class="propinst-color">'color'</span></a> property is set after the <a href="box.html#propdef-border-left" class="noxref"><span
class="propinst-border-left">'border-left'</span></a> property is not
relevant.
</div>

<hr class="navbar">

<div class="navbar" align="center">
<p><a href="media.html">previous</a> &nbsp;
<a href="visuren.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</BODY>
</HTML>