Contents
The CSS box model describes the rectangular boxes that are
generated for elements in the <a href="conform.html#doctree"="">document
tree</a> and laid out according to the <a href="visuren.html"="">visual formatting
model</a>.


Each box has a
<span class="index-def" title="box::content|content::of a box"="">
<a name="box-content-area"=""><dfn="">content area</dfn></a></span> (e.g.,
text, an image, etc.) and optional surrounding 
<span class="index-def" title="box::padding|padding::of a box"="">
<a name="box-padding-area"=""><dfn="">padding</dfn></a></span>,
<span class="index-def" title="box::border|border::of a box"="">
<a name="box-border-area"=""><dfn="">border</dfn></a></span>, and 
<span class="index-def" title="box::margin|margin::of a box"="">
<a name="box-margin-area"=""><dfn="">margin</dfn></a></span> areas; the size
of each area is specified by properties defined below. The following
diagram shows how these areas relate and the terminology used to refer
to pieces of margin, border, and padding:
 ; ; ;<a name="img-boxdim" href="/wg_a52b03be97db00a8b00fb8f33a293d141/en/de/www.w3.org/images/longdesc/boxdim-desc.html" title="Long description of illustration of box areas"="">[D]</a>
The margin, border, and padding can be broken down into top, right,
bottom, and left segments (e.g., in the diagram, "LM" for left margin,
"RP" for right padding, "TB" for top border, etc.).


The perimeter of each of the four areas (content, padding, border,
and margin) is called an "edge", so each box has four edges:
Each edge may be broken down into a top, right, bottom, and left
edge.


The dimensions of the content area of a box &mdash; the <span class="index-def" title="box::content width"=""><a name="content-width"=""><dfn="">content width</dfn></a></span> and <span class="index-def" title="box::content height"=""><a name="content-height"=""><dfn="">content height</dfn></a></span> &mdash; 
depend on several factors: whether the element generating
the box has the <a href="visudet.html#propdef-width" class="noxref"=""><span class="propinst-width"="">'width'</span></a>
or <a href="visudet.html#propdef-height" class="noxref"=""><span class="propinst-height"="">'height'</span></a> property
set, whether the box contains text or other boxes, whether the
box is a table, etc. Box widths and heights are discussed
in the chapter on <a href="visudet.html"="">visual formatting
model details</a>.


The background style of the content, padding, and border areas of a
box is specified by the <a href="colors.html#propdef-background" class="noxref"=""><span class="propinst-background"="">'background'</span></a> property of the
generating element. Margin backgrounds are always transparent.


This example illustrates how margins, padding, and borders
interact. The example HTML document:



<;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">;
<;HTML>;
 <;HEAD>;
 <;TITLE>;Examples of margins, padding, and borders<;/TITLE>;
 <;STYLE type="text/css">;
 UL { 
 background: yellow; 
 margin: 12px 12px 12px 12px;
 padding: 3px 3px 3px 3px;
 /* No borders set */
 }
 LI { 
 color: white; /* text color is white */ 
 background: blue; /* Content, padding will be blue */
 margin: 12px 12px 12px 12px;
 padding: 12px 0px 12px 12px; /* Note 0px padding right */
 list-style: none /* no glyphs before a list item */
 /* No borders set */
 }
 LI.withborder {
 border-style: dashed;
 border-width: medium; /* sets border width on all sides */
 border-color: lime;
 }
 <;/STYLE>;
 <;/HEAD>;
 <;BODY>;
 <;UL>;
 <;LI>;First element of list
 <;LI class="withborder">;Second element of list is
 a bit longer to illustrate wrapping.
 <;/UL>;
 <;/BODY>;
<;/HTML>;

results in a <a href="conform.html#doctree"="">document tree</a> with
(among other relationships) a UL element that has two LI
children. 


The first of the following diagrams illustrates what this example
would produce. The second illustrates the relationship between the
margins, padding, and borders of the UL elements and those of its
children LI elements. (Image is not to scale.)
 ; ; ;<a name="img-boxdimeg" href="/wg_a52b03be97db00a8b00fb8f33a293d141/en/de/www.w3.org/images/longdesc/boxdimeg-desc.html" title="Long description of list box example showing margins,
padding, and borders"="">[D]</a>
Note that:
Margin properties specify the width of the <a href="#box-margin-area"="">margin area</a> of a box. The <a href="box.html#propdef-margin" class="noxref"=""><span class="propinst-margin"="">'margin'</span></a> shorthand property sets the
margin for all four sides while the other margin properties only set
their respective side. These properties apply to all elements, but
vertical margins will not have any effect on non-replaced inline
elements.


The properties defined in this section refer to the <span class="index-def" title="<;margin-width>;::definition of"=""><a name="value-def-margin-width"=""><strong=""><;margin-width>;</strong></a></span>
value type, which may take one of the following values:
Negative values for margin properties are allowed, but there may be
implementation-specific limits. 


<em="">Value:</em> ; ; | <a href="box.html#value-def-margin-width" class="noxref"=""><span class="value-inst-margin-width"=""><;margin-width>;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | 0
 |
<em="">Applies to:</em> ; ; | all elements except elements with table display
 types other than table-caption, table and inline-table
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | refer to width of containing block
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | the percentage as specified or the absolute length
 |
These properties have no effect on non-replaced inline
elements.
<em="">Value:</em> ; ; | <a href="box.html#value-def-margin-width" class="noxref"=""><span class="value-inst-margin-width"=""><;margin-width>;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | 0
 |
<em="">Applies to:</em> ; ; | all elements except elements with table display
 types other than table-caption, table and inline-table
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | refer to width of containing block
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | the percentage as specified or the absolute length
 |
These properties set the top, right, bottom, and left margin of a
box.



h1 { margin-top: 2em }

<em="">Value:</em> ; ; | <a href="box.html#value-def-margin-width" class="noxref"=""><span class="value-inst-margin-width"=""><;margin-width>;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements except elements with table display
 types other than table-caption, table and inline-table
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | refer to width of containing block
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
The <a href="box.html#propdef-margin" class="noxref"=""><span class="propinst-margin"="">'margin'</span></a> property is a
shorthand property for setting <a href="box.html#propdef-margin-top" class="noxref"=""><span class="propinst-margin-top"="">'margin-top'</span></a>, <a href="box.html#propdef-margin-right" class="noxref"=""><span class="propinst-margin-right"="">'margin-right'</span></a>, <a href="box.html#propdef-margin-bottom" class="noxref"=""><span class="propinst-margin-bottom"="">'margin-bottom'</span></a>, and <a href="box.html#propdef-margin-left" class="noxref"=""><span class="propinst-margin-left"="">'margin-left'</span></a> at the same place in
the style sheet.


If there is only one component value, it applies to all
sides. If there are two values, the top and bottom margins
are set to the first value and the right and left margins 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.



body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top &; bottom = 1em, right &; left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

The last rule of the example above is equivalent to the example
below:



body {
 margin-top: 1em;
 margin-right: 2em;
 margin-bottom: 3em;
 margin-left: 2em; /* copied from opposite side (right) */
}

In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to <dfn=""><a name="x26"=""><span class="index-def"="">collapse</span></a></dfn>, and the
resulting combined margin is called a <dfn=""><a name="x27"=""><span class="index-def" title="collapsing margin"="">collapsed margin</span></a></dfn>.


Adjoining vertical margins collapse, except:


Horizontal margins never collapse.


Two margins are <a name="x28"=""><span class="index-def" title="adjoining margins"=""><dfn="">adjoining</dfn></span></a> if and only if:


A collapsed margin is considered adjoining to another margin if any
of its component margins is adjoining to that margin.


<strong="">Note.</strong> Adjoining margins can be
generated by elements that are not related as siblings or ancestors.


<strong="">Note</strong> the above rules imply that:


When two or more margins collapse, the resulting margin width is
the maximum of the collapsing margins' widths. In the case of negative
margins, the maximum of the absolute values of the negative adjoining
margins is deducted from the maximum of the positive adjoining
margins. If there are no positive margins, the maximum of the
absolute values of the adjoining margins is deducted from zero.


If the top and bottom margins of a box are
adjoining, then it is possible for margins to <dfn=""><a name="x29"=""><span class="index-def"="">collapse through</span></a></dfn> it. In this case,
the position of the element depends on its relationship with the other
elements whose margins are being collapsed.


Note that the positions of elements that have been collapsed
through have no effect on the positions of the other elements with
whose margins they are being collapsed; the top border edge position
is only required for laying out descendants of these elements.



The padding properties specify the width of the <a href="#box-padding-area"="">padding area</a> of a box. The <a href="box.html#propdef-padding" class="noxref"=""><span class="propinst-padding"="">'padding'</span></a> shorthand property sets the
padding for all four sides while the other padding properties only set
their respective side. 


The properties defined in this section refer to the <span class="index-def" title="<;padding-width>;::definition of"=""><a name="value-def-padding-width"=""><strong=""><;padding-width>;</strong>
</a></span> value type, which may take one of the following values:
Unlike margin properties, values for padding values cannot be
negative. Like margin properties, percentage values for padding
properties refer to the width of the generated box's containing block.


<em="">Value:</em> ; ; | <a href="box.html#value-def-padding-width" class="noxref"=""><span class="value-inst-padding-width"=""><;padding-width>;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | 0
 |
<em="">Applies to:</em> ; ; | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | refer to width of containing block
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | the percentage as specified or the absolute length
 |
These properties set the top, right, bottom, and left padding of
a box.



blockquote { padding-top: 0.3em }

<em="">Value:</em> ; ; | <a href="box.html#value-def-padding-width" class="noxref"=""><span class="value-inst-padding-width"=""><;padding-width>;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | refer to width of containing block
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
The <a href="box.html#propdef-padding" class="noxref"=""><span class="propinst-padding"="">'padding'</span></a> property is a
shorthand property for setting <a href="box.html#propdef-padding-top" class="noxref"=""><span class="propinst-padding-top"="">'padding-top'</span></a>, <a href="box.html#propdef-padding-right" class="noxref"=""><span 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.


If there is only one component 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.


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:



h1 { 
 background: white; 
 padding: 1em 2em;
} 

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.

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.



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

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="<;border-width>;::definition of"=""><a name="value-def-border-width" class="value-def"=""><strong=""><;border-width>;</strong></a></span>
value type, which may take one of the following values:
The interpretation of the first three values depends on the user
agent. The following relationships must hold, however:


'thin' <;='medium' <;= 'thick'. 


Furthermore, these widths must be constant throughout a document.


<em="">Value:</em> ; ; | <a href="box.html#value-def-border-width" class="noxref"=""><span class="value-inst-border-width"=""><;border-width>;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | medium
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | absolute length; '0' if the border style is 'none' or 'hidden'
 |
These properties set the width of the top, right, bottom,
and left border of a box.


<em="">Value:</em> ; ; | <a href="box.html#value-def-border-width" class="noxref"=""><span class="value-inst-border-width"=""><;border-width>;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
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. 


If there is only one component 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.



In the examples below, the comments indicate the resulting widths
of the top, right, bottom, and left borders:



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 */

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


<em="">Value:</em> ; ; | <a href="syndata.html#value-def-color" class="noxref"=""><span class="value-inst-color"=""><;color>;</span></a> | transparent | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | the value of the 'color' property
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | when taken from the 'color' property, the computed value of 'color';
 otherwise, as specified
 |
<em="">Value:</em> ; ; | [ <a href="syndata.html#value-def-color" class="noxref"=""><span class="value-inst-color"=""><;color>;</span></a> | transparent ]{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
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:
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 component 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>.


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.


In this example, the border will be a solid black line.


p { 
 color: black; 
 background: white; 
 border: solid;
}

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="<;border-style>;, definition of"=""><a name="value-def-border-style"=""><strong=""><;border-style>;</strong></a></span>
value type, which may take one of the following values:
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.





<em="">Value:</em> ; ; | <a href="box.html#value-def-border-style" class="noxref"=""><span class="value-inst-border-style"=""><;border-style>;</span></a> | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | none
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | as specified
 |
<em="">Value:</em> ; ; | <a href="box.html#value-def-border-style" class="noxref"=""><span class="value-inst-border-style"=""><;border-style>;</span></a>{1,4} | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
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 component 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.



#xy34 { border-style: solid dotted }

In the above example, the horizontal borders will be 'solid' and
the vertical borders will be 'dotted'.

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


<em="">Value:</em> ; ; | [ <a href="box.html#value-def-border-width" class="noxref"=""><span class="value-inst-border-width"=""><;border-width>;</span></a> || <a href="box.html#value-def-border-style" class="noxref"=""><span class="value-inst-border-style"=""><;border-style>;</span></a> || <a href="box.html#propdef-border-top-color" class="noxref"=""><span class="propinst-border-top-color"=""><;'border-top-color'>;</span></a> ] | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
This is a shorthand property for setting the width, style, and
color of the top, right, bottom, and left border of a box.



h1 { border-bottom: thick solid red }

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 <a href="colors.html#propdef-color" class="noxref"=""><span class="propinst-color"="">
'color'</span></a> property:



H1 { border-bottom: thick solid }

<em="">Value:</em> ; ; | [ <a href="box.html#value-def-border-width" class="noxref"=""><span class="value-inst-border-width"=""><;border-width>;</span></a> || <a href="box.html#value-def-border-style" class="noxref"=""><span class="value-inst-border-style"=""><;border-style>;</span></a> || <a href="box.html#propdef-border-top-color" class="noxref"=""><span class="propinst-border-top-color"=""><;'border-top-color'>;</span></a> ] | <a href="cascade.html#value-def-inherit" class="noxref"=""><span class="value-inst-inherit"="">inherit</span></a>
 |
<em="">Initial:</em> ; ; | see individual properties
 |
<em="">Applies to:</em> ; ; | all elements
 |
<em="">Inherited:</em> ; ; | no
 |
<em="">Percentages:</em> ; ; | N/A
 |
<em="">Media:</em> ; ; | visual |
<em="">Computed ;value:</em> ; ; | see individual properties
 |
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.



For example, the first rule below is
equivalent to the set of four rules shown after it:



p { border: solid red }
p {
 border-top: solid red;
 border-right: solid red;
 border-bottom: solid red;
 border-left: solid red
}

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



Consider this example:


blockquote {
 border: solid red;
 border-left: double;
 color: black;
}

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.

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).


When the element's <a href="visuren.html#propdef-direction" class="noxref"=""><span class="propinst-direction"="">'direction'</span></a> 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.


When the element's <a href="visuren.html#propdef-direction" class="noxref"=""><span class="propinst-direction"="">'direction'</span></a> 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.