8000 csswg-drafts/css2/box.src at 8074b9bc3551ff2eebd4c3606306d85ab268059c · xfq/csswg-drafts · GitHub
Skip to content

box.src

Latest commit

 

History

History
836 lines (695 loc) · 32.7 KB

box.src

File metadata and controls

836 lines (695 loc) · 32.7 KB
property sets the color of the four borders. Values have the following
meanings:</p>
<dl>
<dt><span class="index-inst" title="&lt;color&gt;"><span
class="value-inst-color"><strong>&lt;color&gt;</strong></span></span>
<dd>Specifies a color value.
<dt><strong>transparent</strong>
<dd>The border is transparent (though it may have width).
</dl>
<P>The <span class="propinst-border-color">'border-color'</span>
property can have from one to four component values, and the values
are set on the different sides as for <span
class="propinst-border-width">'border-width'</span>.
<P>If an element's border color is not specified
with a border property, user agents must use the value
of the element's <span
class="propinst-color">'color'</span> property as the
<a href="cascade.html#computed-value">computed value</a>
for the border color.
<div class="example">
<P>In this example, the border will be a solid black line.
<PRE>
p {
color: black;
background: white;
border: solid;
}
</PRE>
</div>
<H3><A name="border-style-properties">Border style</a>:
<span class="propinst-border-top-style">'border-top-style'</span>,
<span class="propinst-border-right-style">'border-right-style'</span>,
<span class="propinst-border-bottom-style">'border-bottom-style'</span>,
<span class="propinst-border-left-style">'border-left-style'</span>, and
<span class="propinst-border-style">'border-style'</span></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 may take one of the following values:</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; the computed border width is zero.
<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 <span
class="propinst-border-width">'border-width'</span>.
<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 'groove': 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 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 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="#border-color-properties">border
color properties</a>, but UAs may choose their own algorithm to
calculate the actual colors used. For instance, if the 'border-color'
has the value 'silver', then a UA could use a gradient of colors from
white to dark gray to indicate a sloping border.
<!-- Remove? BB 29 Apr 2003
<P><span class="index-inst" title="conformance"><a
href="conform.html#conformance">Conforming HTML user agents</a></span> may
interpret 'dotted', 'dashed', 'double', 'groove', 'ridge',
'inset', and 'outset' to be 'solid'.
-->
<!-- #include src=properties/border-top-style.srb -->
<!-- #include src=properties/border-style.srb -->
<P> The <span class="propinst-border-style">'border-style'</span>
property sets the style of the four borders. It can have from one to
four component values, and the values are set on the different sides as for
<span class="propinst-border-width">'border-width'</span> above.
<div class="example"><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><A name="border-shorthand-properties">Border shorthand properties</a>:
<span class="propinst-border-top">'border-top'</span>,
<span class="propinst-border-right">'border-right'</span>,
<span class="propinst-border-bottom">'border-bottom'</span>,
<span class="propinst-border-left">'border-left'</span>, and
<span class="propinst-border">'border'</span></h3>
<!-- #include src=properties/border-top.srb -->
<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>
<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="about.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 <span class="propinst-color">
'color'</span> property:
<PRE>
H1 { border-bottom: thick solid }
</PRE>
</div>
<!-- #include src=properties/border.srb -->
67E7
<P> The <span class="propinst-border">'border'</span> property is a
shorthand property for setting the same width, color, and style for
all four borders of a box. Unlike the shorthand <span
class="propinst-margin">'margin'</span> and <span
class="propinst-padding">'padding'</span> properties, the <span
class="propinst-border">'border'</span> 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>
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>
Consider this example:
<PRE>
blockquote {
border: solid 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 <span
class="propinst-border-left">'border-left'</span> setting the
width, style, and color. Since the color value is not given by the
<span class="propinst-border-left">'border-left'</span> property, it
will be taken from the <span class="propinst-color">'color'</span>
property. The fact that the <span
class="propinst-color">'color'</span> property is set after the <span
class="propinst-border-left">'border-left'</span> property is not
relevant.
</div>
<h2><a name="bidi-box-model">The box model for inline elements in bidirectional context</a></h2>
<p>For each line box, UAs must take the inline boxes generated for
each element and render the margins, borders and padding in visual
order (not logical order).
<p>When the element's <span
class=propinst-direction>'direction'</span> property is 'ltr', the
left-most generated box of the first line box in which the element
appears has the left margin, left border and left padding, and the
right-most generated box of the last line box in which the element
appears has the right padding, right border and right margin.
<p>When the element's <span
class=propinst-direction>'direction'</span> property is 'rtl', the
right-most generated box of the first line box in which the element
appears has the right padding, right border and right margin, and the
left-most generated box of the last line box in which the element
appears has the left margin, left border and left padding.
</BODY>
</HTML>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.dcl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
End:
-->