The float Property

The float property is used to specify whether an element is floated or not and the direction (left or right) that it is floated. The float property can be applied to any element. It is not an inherited property. It can take the values left, right, none, and inherit. Its initial value is none.

A floated element does not affect the positioning of other block elements. However, inline boxes are shortened to make room for the margin box of a floted element.

Margins on floated elements never collapse. How a floated element behaves is described in the W3C specification of floated elements. The description consists of nine rules.

Rule 1 states that the left outer edge (outer edge of the left margin) of a left-floating box may not be to the left of the left edge (outer edge of the padding) of its containing block. An analogous rule holds for right-floating elements.

What this means is that the outer edge of the left margin of a left-floated element will be aligned with the inner edge of the left padding of the containing block. Similarly, the outer edge of the right margin of a right-floated element will be aligned with the inner edge of the right padding of the containing block.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image4.png" alt="image 4" style="float:left;margin:5px;padding:10px;border:solid 5px slategray; background-color:palegreen">g wizards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the gap between the left border outer edge of the image and left border inner edge of the <p> is 15px. This is because the left margin of the image is 5px and the left padding of the <p> is 10px and, after the image is aligned according to the rule, the margins are next to each other. Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Rule 2 states that if the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge (the outer edge of the left margin) of the current box must be to the right of the right outer edge (the outer edge of the right margin) of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

What this means is that the outer edge of the margin of a left-floated element will be aligned to the outer margin edge of an earlier-occuring left-floated element. If there is insufficient space for the later-occuring floated element's box, it's top margin's outer edge will be aligned to the earlier-occuring left-floated element's bottom margin's outer edge. Right-floated elements are handled in a similar way, but aligned to the right.

Therefore, elements that are floated to the same side will not overlap each other.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><span>the</span> five boxin<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">g w<img src="image3.png" alt="image 3" style="padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px;float:left">izards jump quickly, the quick brown fox jumps over the lazy dog</p>

In the above example, the second left-floated image is to the right of the first left-floated image. The margin between them is 10px (5px + 5px). Internet Explorer 6 and 7 render the image in the second line of the <p>. This is a bug.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';float:left">the quick brown fox jumps over the lazy dog</p> <p class="test" style="float:left">the quick brown fox jumps over the lazy dog</p>

In the above example, there is insufficient space to render the second floated <p> next to the first floated <p>. Therefore it is rendered below it.

Rule 3 states that the right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.

Therefore, elements that are floated to opposite sides will never overlap each other.

What this means is that the outer edge of the right margin of a left floated element will be next to the outer edge of the left margin of a right floated element when there is just sufficient horizontal space for the floated elements. If there is extra space, it will appear between the margins of the two floated elements. When there is insufficient space, the second floated element's margin box will be rendered just below the first floated element's margin box.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';padding:10px;border:dashed 10px steelblue"><img src="image4.png" alt="image 4" style="float:right;padding:10px;border:solid 5px saddlebrown; background-color:bisque;margin:5px"><img src="image4.png" alt="image 4" style="float:left;padding:10px;border:solid 5px yellowgreen; background-color:darkseagreen;margin:5px"></p>

In the above example, the space available in the <p> depends on the width of the viewport. The first picture shows how the floated images are positioned when there is sufficient space in the <p> for each image's margin box. The second picture shows how the floated images are positioned when there is insufficient space in the <p> — the second floated image is rendered below the first floated image.

Rule 4 states that a floating box's outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow.

What this means is that the outer edge of the top margin of a floated element cannot be higher than the inner edge of the top margin of its containing block. However, if the preceding element has a bottom margin and the succeeding element has a top margin, these margins will collapse because they will be adjoining to each other. In such a case, the floated element will behave as if it had another block level parent.

Since the margins of inline elements never collapse, the second part of Rule 4 does not apply to inline elements.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0">the quick brown fox jumps over the lazy dog.</p> <p style="font-size:35px;font-family:'Times New Roman';float:left;margin:5px;padding:0;background: none peru"> the five</p> <p style="font-size:35px;font-family:'Times New Roman';margin:5px;padding:0"><span>the quick brown fox jumps</span> over the lazy dog.</p>

Rule 5 states that the outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height: 200px;padding:10px;border:dashed 10px steelblue"><img src="image3.png" alt="image 3" style="float:right;vertical-align:bottom;padding:10px;border:solid 5px slategray; background-color:palegreen;margin:5px"><img src="image3.png" alt="image 3" style="float:left;vertical-align:bottom;padding:10px;border:solid 5px palevioletred; background-color:darkorchid;margin:5px"></p>

In the above example, because there is insufficient horizontal space, the second float is rendered below the first, even though the second float appears at the left. This demonstrates Rule 5.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';width:160px;height:190px"><img src="image3.png" alt="50x50 image" style="float:left;padding:10px;background-color:orangered"> <img src="image4.png" alt="100x100 image" style="float:left;padding:5px;background-color:aquamarine"> <img src="image3.png" alt="50x50 image" style="float:left"></p>

In the above example, the third image's outer top is in line with the margin box of the second floated image even though there is enough place for it next to the first image. This is in accordance with Rule 5.

Rule 6: The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

Another way of putting it is: The outer edge of the margin of a floated element must be at the same height or lower than the inner edge of the padding of any line box that has content whose source code appears earlier than the floated element's.

Content whose source code appears earlier than a particular element's source code is usually on the same line as the element. However, when there is insufficient space for an element, it is rendered on the next line. In this case, if the element is floated, it will float on the next line.

Rule 7: A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. An analogous rule holds for right-floating elements.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';width:100px;height:100px"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

Rule 8: A floating box must be placed as high as possible.

Rule 8 specifies that floated elements that have been positioned according to Rule 2, Rule 5 and Rule 6 have to be positioned as high as possible. Rule 2 specifies two possible positions for a floated box — one lower than the other, Rule 5 specifies that the float be positioned at the same height or lower than a particular margin and Rule 6 specifies that a float must be positioned at the same height or lower than a particular padding. Therefore, Rule 8 specifies that the highest possible position must be chosen.

Rule 9: A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Rule 1, Rule 2, and Rule 3 specify the specify the limit of how much to the right or left a floated element can be positioned. Rule 9 specifies that elements positioned according to those rules must be positoned as left as possible (for left floated elements) or as right as possible (for right floated elements) while not going beyond the limits specified.

Also, Rule 9 specifies that a floated element must be positioned higher but less to the left or right instead of lower but more to the left or right if those are the two available positions.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"><img src="image3.png" alt="50x50 image" style="float:left;margin:5px;"></p>

In the above example, the second floated image can also be placed below the first without violating rules 1 to 8. But because of rule 9, it is placed next to the first floated image.

Nested Floats

A floated element can contain floated descendants. A floated element will expand its height and width to accomodate a floated descendant's height. Internet Explorer 6 and 7 do not obey this rule when rendering a floated element that contains floated descendants.

Negative Margins

Floated elements with negative margins obey all of the float rules. However, the outer edge of the margin box of a floated element with negative margins will be within the padding box of the element.

Floated Elements With Negative Margins Overlapping Other Elements

When a floated element has a negative top margin, it may overlap a preceding element. In such a case, the floated element's text and the preceding element's text overlap and the background color of the floated element appears behind the text.

Example 10: <p style="font-size:35px;font-family:'Times New Roman'" >the quick brown fox jumps over the lazy dog</p><p style="margin-top:-40px;float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

When a floated element overlaps an element that appears after it in the source, the inline content of that element moves away so as not to overlap the floated content. The background color of the floated element appears behind the text.

Example 11: <p style="float:left;background:none cornsilk;font-size:35px;font-family:'Times New Roman'">the quick</p> <p style="font-size:35px;font-family:'Times New Roman'">the five boxing wizards jump quickly</p>

According to the CSS 2.1 specification, when a float overlaps inline boxes (using negative margins), the inline boxes are rendered on top of the floated element's box.

Example 12: <p style="width:580px;font-size:35px;font-family:'Times New Roman'">the quick brown fox jumps <span style="background:none blueviolet">over the lazy</span> dog. the five boxing <span style="background:none gold">wizards.</span> <span style="float:right;margin-top:-20px;margin-left:-50px">jump quickly</span></p>

A floated element's box is rendered on top of block boxes that it overlaps. However, if the contents of the block box are inline boxes, then the inline boxes will be rendered on top of the floated element's box.

float:none

Since none is the initial value of float, the declaration float:none is only useful to override another float declaration that was applied to an element.

float:inherit

float is not an inherited property. However, using the float:inherit declaration, an element can be made to inherit its parent element's float value.

Internet Explorer 6 and Internet Explorer 7 ignore the float:inherit declaration.

The Background Properties

The background of an element is the area over which the content area, padding and borders are drawn. Note that an element's background does not appear in its margin.

There are six background properties in CSS — background-color, background-image, background-attachment, background-repeat, background-position, and background.

The background-color Property

This property specifies the color of the background of an element. It can accept as values, color keywords, system color keywords, hexadecimal color notation, decimal functional rgb notation, percentage functional rgb notation and the keywords transparent and inherit; See Specifying Color in CSS. Its initial value is transparent. The background-color property can be applied to any element. It is not an inherited property.

Below is an example of background-color applied to a block element.

Example 1: <p style="margin:10px;border: 5px black dashed;padding:15px;height:80px;background-color:aqua;font-size:35px;font-family:'TimesNew Roman'"> the quick brown fox jumps over the lazy dog</p>

In the above example, the background color can be seen behind the content area, padding and border (but not the margin). In Internet Explorer 6 and 7, due to a bug, the background color does not appear behind the border. This buggy behavior is seen on all elements that have hasLayout.

Below is an example of background-color applied to an inline non-replaced element (a span).

Example 2: <p style="font-size:35px;font-family:'TimesNew Roman'">the five boxing <span style="background-color:royalblue">wizards jump</span> quickly. the quick brown <span style="margin:10px;border: 5px lightblue dashed;padding:15px;height:80px;background-color:rgb(205,92,92)">fox jumps</span> over the lazy dog. the five <span style="background-color:hotpink">boxing wizards</span> jump quickly</p>

In the above example, since the browser does not allocate extra space for the second span's top and bottom border and padding, they overlap the text that is above and below. The background color of the second span covers the first span's backround color. This is because text that appears later in an (X)HTML document is higher in the stacking order. For the same reason, the background color of the third span covers the background color of the second span. Note, however, that the second span's background color appears behind the text below that does not have a background color specified. This is because, by default, text has a transparent background.

Below is an example of what happens when block elements with background colors overlap each other.

Example 3: <p style="font-size:35px;font-family:'TimesNew Roman';background-color:orchid;width: 200px">abcdefg hijkl</p>
<p style="font-size:35px;font-family:'TimesNew Roman';margin-top:-35px;margin-bottom:-35px;background-color:palegoldenrod">the five boxing wizards jump quickly. the quick brown fox jumps over the lazy dog</p>
<p style="font-size:35px;font-family:'TimesNew Roman';background-color:lightsalmon;width: 200px">abcdefg hijkl</p>

The above example shows that block elements that come later in the (X)HTML document are higher in the stacking order. Because of this, the last <p>'s background color cover the second's and the second's covers the first's. However, unlike in inline elements, the text of any of the three <p>s is not covered by a background color. In Internet Explorer 6 and 7, the text is also covered by the background color. This is a bug.

Below is an example of background-color applied to an inline replaced element (an image).

Example 4: <p style="font-size:35px;font-family:'TimesNew Roman'">the quick <img src="20x50.jpg" alt="20x50 image" style="background-color:mediumspringgreen;padding:5px">brown fox jumps over the lazy dog</p>

The background color on the image can only be seen when the image has padding.

background-color:transparent

transparent is the initial value of background-color, therefore all elements have a transparent background unless otherwise specified. Therefore, the background-color:transparent declaration can be used to override a background color that has been already applied to an element.

background-color:inherit

background-color is not, by default, an inherited property. However, the background color of an element appears in its child elements because the initial value of background-color is transparent. Since the background color of an element is, by default, transparent, the specified background color of an ancestor element will show through.

Internet Explorer 6 and 7 ignore CSS declarations containing the inherit value.

The background-color:inherit causes an element to inherit its parent's background color. The effect of the background-color:inherit can only be observed in certain situations — two examples are shown below.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';color:red;background-color:white;background-image:url('pattern.bmp')">the quick <span style="background-color:inherit">brown</span> fox jumps over the lazy dog.</p>

Example 6: <p style="font-size:35px;font-family:'Times New Roman';background-color:white">the quick brown fox jumps over the lazy dog. the five <span style="background-color:inherit;padding-top:20px">boxing wizards</span> jump quickly. the quick brown fox jumps over the lazy dog.</p>

The background-image Property

This property specifies an image that will appear as the background of the content area, padding and border of an element. This property can be applied to any element. An element can have only one background image. background-image can take as values a URL, the keyword none and the keyword inherit. Here, URL is the address of an image file. The URL is within quotes and the whole expression is within parentheses, prefixed with url . Putting the URL withing single or double quotes is optional. The initial value of background-image is none. It is not an inherited property.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';background-image:url('star.gif');padding:0">the quick brown fox jumps over the lazy dog.</p>

(Image taken from Google Chrome)

In the above example, the background image is aligned to the top left corner of the content area of the <p>, and then tiled horizontally and vertically. By default, background images are vertically and horizontally tiled.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';background-image:url('star.gif');background-attachment:scroll;padding:10px;border: dashed powderblue 10px">the quick brown fox jumps over the lazy dog.</p>

In the above example, the <p> has both padding and a border. Therefore, the image is aligned to the top left corner of the padding (the outer edge of the padding), and then tiled vertically and horizontally. Internet Explorer 6 and 7 align the background image to the top left corner of the border (the outer edge of the border).

Inline replaced and non-replaced elements can also have background images. Only when an image has padding or a border, or when the image fails to load, can its background image be seen.

Example 9: <p style="font-size:35px;font-family:'Times New Roman'">the <img src="20x50.jpg" alt="20x50 image" style="background-image:url(star.gif);padding:10px;border: 10px dotted darkseagreen">quick brown fox jumps over the lazy dog</p>

background-image:none

none is the default value of the background-image property. Therefore, it is only useful to override another background-image declaration that matches an element.

background-image:inherit

background-image is not an inherited property. However, since an element's background is by default transparent, any background image of an ancestor element can be seen within it. The background-image:inherit declaration causes the background image of an element's parent to appear within it, aligned to the top left corner of the element's box.

Internet Explorer 6 and 7 ignore background-image:inherit declarations.

Example 10: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif)">five <span style="background-image:inherit">quick</span> brown foxes jump over the lazy dog</p>

The background-repeat Property

This property specifies whether or not a background image is tiled or not and, if it is, whether it is tiled vertically, horizontally or both. The background-repeat property can take the values repeat, repeat-x, repeat-y, no-repeat and inherit. The initial value is repeat.This is not an inherited property.

background-repeat:repeat-x

This declaration causes the background image to be tiled horizontally (the x-axis) only.

Example 11: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:repeat-x;border:10px limegreen double">the quick brown fox jumps over the lazy dog</p>

In the above example, note how the background image in the border is vertically aligned with the background images of the content area of the <p>. In Internet Explorer 6 and 7 the background image is aligned to the outer top left edge of the border. This is a bug.

background-repeat:repeat-y

This declaration causes the background image to be tiled vertically (the y-axis) only.

Example 12: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:repeat-y;border:10px cadetblue double">the quick brown fox jumps over the lazy dog</p>

In the above example, note how the background image in the border is horizontally aligned with the background images of the content area of the <p>. In Internet Explorer 6 and 7, the background image is aligned to the outer top left edge of the border. This is a bug.

background-repeat:no-repeat

With this declaration, the background image is not tiled at all.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:no-repeat;border: 10px rosybrown double">the quick brown fox jumps over the lazy dog</p>

In the above example, note that the background image does not appear in the border at all. Internet Explorer 6 and 7, the background image is aligned to the outer top left edge of the border. This is a bug.

background-repeat:repeat

This declaration is causes the background image to tile both horizontally and vertically. Since this is the initial value of the background-repeat property, this declaration is only useful to override another background-repeat declaration that matches an element.

background-repeat:inherit

Since background-repeat is not an inherited property, the background-repeat:inherit declaration can be used to make an element inherit its parent's background-repeat value. Internet Explorer 6 and 7 ignore this declaration.

Example 14: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-repeat:repeat-y">the <span style="background-image:url(star_i.gif);background-repeat:inherit">quick</span> brown fox jumps over the lazy dog</p>

The background-attachment Property

This property controls whether or not the background image scrolls when the web page is scrolled by the user. This property takes the values scroll, fixed and inherit. The initial value is scroll. background-attachment is not an inherited property.

background-attachment:fixed

This declaration causes the background image of an element to be aligned with the top left corner of the viewport. The alignment can be changed using the background-position property.

With background-attachment:fixed, the background image in an element appears in the position that it would have if it was tiled from the top left corner of the viewport. However, if the background-repeat property is set to no-repeat, the background image will not be tiled. Therefore, in such a case, the background image will be visible only when the element's box is close to the top left corner of the viewport. Similarly, if the background-repeat property has a value of repeat-x the background image will be visible only when the element's box appears towards the top of the viewport. With repeat-y, the background image will be visible only when the element is close to the left side of the viewport. Since the background image is aligned with the viewport, it does not move unless the viewport is resized. Therefore, when the user scrolls the web page, a fixed background image does not move with the rest of the element.

Internet Explorer 6 renders background-attachment:fixed correctly on the html element. background-attachment:fixed is rendered correctly only when the body element is the same size as the viewport.

Example 15: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed">the quick brown fox jumps over the lazy dog</p>

Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 vertically misalignes the background image by 1px — it renders the background image one pixel lower than it should.

Example 16: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:repeat-x">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image of the <p> can be seen only when the element is scrolled to the top of the viewport. Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 does not render the background image at all — the background image cannot be seen even when the <p> is scrolled to the top of the viewport. This is a bug.

Example 17: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:repeat-y">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

In the above example, the background image can be seen on the left side of the <p>. It is aligned to the left edge of the viewport. Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug.

Example 18: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:fixed;background-repeat:no-repeat">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image of the <p> can be seen only when the element is scrolled to the top of the viewport. Internet Explorer 6 does not render the background image's position fixed to the viewport. This is a bug. Internet Explorer 7 does not render the background image at all — the background image cannot be seen even when the <p> is scrolled to the top of the viewport. This is a bug.

background-attachment:scroll

scroll is the initial value of background-attachment. Therefore, the background-attachment:scroll declaration is only useful to override another background-attachment declaration that matches an element.

background-attachment:inherit

background-attachment is not an inherited property. However, the background-attachment:inherit will cause an element to inherit its parent element's background-attachment value.

Internet Explorer 6 and 7 ignore the inherit value.

Example 19: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-attachment:scroll">the <span style="background-image:url(star_i.gif);background-attachment:inherit">quick</span> brown fox jumps over the lazy dog</p>

The background-position Property

This property specifies the position of the background image with respect to the top left corner of an element's padding box (in the case of background-attachment:scroll) or with respect to the top left corner of the viewport (in the case of background-attachment:fixed). This property can only be applied on block-level and replaced elements (inline or block). It is not an inherited property. Its inital value is 0% 0%. It can take length values, percentages and the keywords top, bottom, left, right, center and inherit. The background-position property can take either one or two space-separated values.

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

background-position with Keywords

The keywords applicable to background-position are top, bottom, left, right, center. background-position can take either one or two keyword values. If a background-position declaration has only one keyword value, the other keyword value is assumed to be center.

With keywords, the starting position of a background image is the position at which the background image is located after aligning its top left corner to the point specified. If the element has the declaration background-repeat:repeat then the background image is tiled in all four directions starting from the starting position. If the element has the declaration background-repeat:repeat-x or background-repeat:repeat-y, then the image is tiled left and right or up and down, respectively, from the starting position. If the element has background-repeat:no-repeat, then the background image is displayed at the starting position without tiling.The top and bottom keywords specify the starting alignment of the background image on the y-axis (vertical axis), left and right specify the starting alignment of the background image on the x-axis (horizontal axis) and center refers to a point that is equidistant from the x and y axes (the horizontal and vertical center of an element's padding box).

Example 20: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-position:top right">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is truncated at the left and at the bottom. This indicates top right alignment.

The order of the keywords is not important — background-position:top right and background-position: right top are equivalent.

Example 21: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-position:top right;background-repeat:repeat-x">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is truncated at the left and aligned to the top. This indicates top right alignment.

The keyword center can refer either to the vertical alignment or the horizontal alignment of the background image. center refers to vertical alignment when paired with horizontal alignment keywords right or left. center refers to horizontal alignment when paired with vertical alignment keywords top or bottom.

Example 22: <p style="font-size:35px;font-family:'Times New Roman';background-image:url(star.gif);background-position: center top">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is truncated at the left, right and bottom. This indicates center top alignment.

When the background-position property has only a single keyword, the second keyword is assumed to be center.

Example 23: <p style="font-size:35px;font-family:'Times New Roman';background-position:left;background-image:url(star.gif);background-repeat:no-repeat">the quick brown fox jumps over the lazy dog</p>

In the above example, the background image is positioned as if the <p> had the declaration background-position:left center.

Below is a diagram showing all the combinations of background-position keywords (except inherit) with the resulting starting position of the background image.

Example 24:

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

Position keyword-valued background-position declarations with the declaration background-attachment:fixed cause the background image to be positioned with respect to the viewport. However, the background image is visible only in the border box of the element.

background-position with Length Values

A background-position declaration with length values specifies the horizontal and vertical offset of the background image. The background-position property can take a pair of length values or a single value. When this property has only one value, that value is considered to be the horizontal offset and the vertical position is considered to be center.With two values, the first length value specifies the horizontal offset and the second length value specifies the vertical offset from the top left corner of the padding box (in case of background-attachement:scroll) or from the top left corner of the viewport (in case of background-attachment:fixed).

Example 25: <p style="font-size:35px;font-family:'Times New Roman';background-position:5px 15px;background-repeat: no-repeat;background-image:url(star.gif)">the quick brown fox jumps over the lazy dog</p>

Mixing length values and position keywords is allowed. When the value of a background-declaration contains at least one length value, the first sub-value specifies the horizontal position or offset and the second sub-value specifies the vertical position or offset. In such cases, the first sub-value can be left, right, center or a length value and the second sub-value can be top, bottom, center or a length value.

Example 26: <p style="font-size:35px;font-family:'Times New Roman';background-position:5px bottom;background-repeat: no-repeat;background-image:url(star.gif)">the quick brown fox jumps over the lazy dog</p>

Negative length values are permitted in background-position declarations. Large negative length values may cause a background image to be not visible at all.

Example 27: <p style="font-size:35px;font-family:'Times New Roman';background-position: -5px -5px;background-repeat:no-repeat;background-image:url(star.gif)"> the quick brown fox jumps over the lazy dog</p>

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

Length-valued background-position declarations with the declaration background-attachment:fixed cause the background image to be positioned with respect to the viewport. However, the background image is visible only in the border box of the element.

background-position with percentage values

A background-position declaration with percentage values specifies two points — a point on the background image and a point in the paddding box with which the point on the background image is made to coincide.

The first percentage sub-value determines the two horizontal coordinates — one calculated with respect to the width of the background image which determines the horizontal coordinate of the point on the background image, and the other calculated with respect to the width of the padding box of the element in which the background image appears which determines the horizontal coordinate of the point in the padding box with which the point on the background image is made to coincide.
The second percentage sub-value determines the two vertical coordinates — one calculated with respect to the height of the background image which determines the vertical coordinate of the point on the background image, and the other calculated with respect to the height of the padding box of the element in which the background image appears which determines the vertical coordinate of the point in the padding box with which the point on the background image is made to coincide.
The points are determined from the top left corner of the padding box and the top left corner of the background image

In case of an element with background-attachment:fixed, the offset is determined with respect to the top left corner of the image and the top left corner of the viewport.

Example 28: <div style="width:600px"><p style="font-size:35px;font-family:'Times New Roman';margin:5px;background-image:url(image3.png);background-position:10% 60%; background-repeat:no-repeat;background-color:transparent;color:yellow;padding:0"> the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p></div>

In the above example, the image is 50px by 50px and the padding box's width is 590px (because of the left and right 5px) and its height is 82px. The point on the image and the padding box can be found in this way:

• The value of the background-position declaration is 10% 60%
• The horizontal sub-value is 10% and the vertical sub-value is 60%
• The image's width and height is 50px. 10% of 50px is 5px and 60% of 50px is 30px. Therefore the point on the image is (5px,30px)
• The width of the element's padding box is 590px and the height is 82px. 10% of 590px is 59px and 60% of 82px is 49.2px. Therefore, the point on the padding box is (59px, 49px) — 49.2px is rounded off to 49px

The point on the image is made to coincide with the point on the padding box. The horizontal and vertical distance of the top left corner of the image from the top and left outer edge of the padding box can be calculated by subtracting the background image's point from the padding box's point — (59px, 49px) - (5px, 30px) = (54px, 19px). Therefore, the top left corner of the image will be located at a horizontal distance of  54px from the outer edge of the left padding and a vertical distance of 19px from the outer edge of the top padding.

Below is an image showing different percentage values of background-position that have keyword equivalents:

Example 29:

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge the padding. This is a bug.

Percentages greater than 100 are allowed. — they cause the background image to be partially visible or to be not visible at all. When a background image is positioned such that a part of it is outside the padding box, it will be visible behind borders, but it will not be visible in the margins of the element.

A value that is greater than 100% causes the padding box alignment point to be outside the padding box. It also causes the background image alignment point to be outside the image — it is as if the image is larger than it really is. When the two alignment points coincide, the background image will be partially visible or not visible at all.

Example 30: <div style="width:200px;"><p style="font-size:35px;font-family:'Times New Roman';background-image:url(image3.png);background-repeat:no-repeat; background-position:0% 120%;margin:0;padding:0;border:dashed 35px skyblue">the five boxing wizards jump quickly</p></div>

In the above example, the height of the <p>'s padding box is 205px. The vertical sub-value of the background-position declaration is 120%. Therefore the vertical coordinate of the padding box alignment point is 120% of 205px, which is 246px. The horizontal coordinate is zero. Therefore, the padding box alignment point will be 246px - 205px = 41px below the outer edge of the padding. The size of the image is 50px by 50px. The vertical sub-value of the background-position declaration is 120%. Therefore the vertical coordinate of the background image alignment point is 120% of 50px, which is 60px. The horizontal coordinate is zero. Therefore the alignment point will be 10px below the left edge of the background image. The image will therefore behave as if it is 60px tall. The vertical height of the image that is outside the padding box will be 41px - 10px = 31px and the part visible in the padding box is 50px - 31px = 19px.

Internet Explorer 6 and 7 position the background image with respect to the outer edge of the border instead of the outer edge of the padding. This is a bug.

Example 31: The picture below shows a background image of height and width 50px positioned in a padding box of height and width 200px. The picture shows the positions of the background image for the declarations background-position:10% 20%, background-position:90% 120% and background-position:50% -20%.

The number of pixels that the background image is moved can be calculated by subtracting the horizontal and vertical positions of the background image from the corresponding positions of the padding box. For example, if the padding box is 100px by 75px and the background image is 50px by 25px, and the declaration is background-position: 10% 10%, then the horizontal distance moved will be 10px - 5px = 5px and the vertical distance moved will be 7.5px - 2.5px = 5px. The direction of movement depends on whether the background image is larger or smaller than the padding box.

When the background image is smaller than the padding box, positive percentages less than 100 in a background-position declaration cause the background image to move towards the right and the bottom. With positive percentages greater than 100, the bottom right of the background image may move out of the padding box. The greater the size difference between the image and the padding box, the greater is the chance that a part of the (or the entire) background image moves out of the padding box.With negative percentages, the background image moves towards the left and top.

When the background image is the same size as the padding box, it cannot be moved with background-position.

When the background image is larger than the padding box, positive percentages less than 100 in a background-position declaration cause the background image to move towards the left and top. With negative percentages greater than 100, the top left of the background image may move out of the padding box. The greater the size difference between the image and the padding box, the greater the chance that a part of the (or the entire) background image moves out of the padding box. With negative percentages, the background images moves towards the bottom and right.

Internet Explorer 8 and below ignore the decimal portion of percentage values. Therefore, in Internet Explorer 7 and below, background-position: 10.4% 25.9% is the same as background-position: 10% 25%. This prevents precision positioning of the background image. To overcome this limitation, the background image should be only slightly smaller or slightly larger than its padding box.

Percentage-valued background-position declarations with the declaration background-attachment:fixed cause the background image to be positioned with respect to the viewport. However, the background image is visible only in the border box of the element.

background-position:inherit

background-position is not an inherited property. However, the background-position:inherit will cause an element to inherit its parent element's background-position value.

Internet Explorer 6 and 7 ignore the inherit value.

The background Property

background is a shorthand property. That is, it allows specifying the values of background-color, background-image, background-repeat, background-attachment and background-position in a single declaration.

Example 32: background: fixed url(image.gif) peachpuff 10% 10% no-repeat

The order of the sub-values is not important. A background declaration must have at least one sub-value. Those values that are not specified are given the default value by the browser. The defalut values of the properties of a background declaration are the same as the initial values of each of the individual properties. They are: for background-color, transparent; for background-image, none; for background-repeat, repeat; for background-attachment, scroll and for background-position, 0% 0%.

Example 33: background: skyblue;

The above declaration is equivalent to background: skyblue scroll none 0% 0% repeat;

The height Property

The height property is used to specify the height of the content-area of block-level elements, inline replaced elements and other elements to which the declarations display:block or display:inline-block have been applied.

By default, the height of an element is just enough to accommodate all its descendant elements.

Its initial value is auto. It is not an inherited property. It can take length values, percentages and the keywords auto and inherit. Percentage values refer to the height of the containing block element. Negative values are not allowed.

height with px values

In the example below the height property is applied to a block-level element.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';height:500px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

The height property cannot be applied to inline-level non-replaced elements. However, it can be applied to inline-level replaced elements such as img.

Example 2: <p style="font-size:35px;font-family:'Times New Roman'">the <img src="20x50.jpg" alt="20x50.jpg">quick <img style="height:100px" src="20x50.jpg" alt="20x50.jpg"> lazy dog.</p>

In the above example, the image is resized proportionally to 40 pixels by 100 pixels. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the image is anti-aliased. However, in Internet Explorer 6 and Internet Explorer 7 the image is not anti-aliased.

height with percentage values

With the height property, percentage values refer to the height of the containing element. If the parent element does not have it's height declared with a length or percentage value, then the percentage height declaration of the child element is ignored. The reason for this is, since, by default, an element is just tall enough to contain its descendant elements, if the height of a descendant element was in turn dependent on the height of the parent element, it would be an infinite loop.

Example 3: <div style="height:400px;background-color:purple"><p style="font-size:35px;font-family:'Times New Roman';height: 75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div>

In the above example, the height of the <p> will be 75% of 400px, which is 300px.

Example 4: <div style="height:400px;background-color:purple"><div><p style="font-size:35px;font-family:'Times New Roman';height:75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div></div>

In the above example, since the <p>'s parent element does not have a percentage or px height declaration, the height declaration on the <p> has no effect. However, Internet Explorer 6 and Internet Explorer 7, due to a bug, render the <p> with a height of 300px. This buggy behavior can be fixed by triggering Internet Explorer 6 and 7's hasLayout property on the <p>'s parent div. One way of doing this is by using the Internet Explorer-only declaration zoom:1 on the div.

width with em values

em values values refer to the font size of the element.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';height:7.15em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

In the above example, the height of the <p> is 7.15*35px = 250.25px

height:auto

Since auto is the initial value of height, the height:auto declaration is only useful to override another height declaration that has been applied to an element.

height:inherit

height is not an inherited property. However, the height:inherit declaration can be used in order that an element inherits the height declaration of its parent.

Internet Explorer 6 and Internet Explorer 7 ignore the height:inherit declaration.

Concluding Notes

Unlike the width property, with height, percentage-value declarations are ignored if the parent element does not have a percentage or px height declaration, even if an ancestor element does.

In Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8, when the height of the content area + padding + margins of an element is more than the specified height of its containing element, the element overflows out of the content area of the containing element. However, in Internet Explorer 6 the height of the containing element is increased to accommodate the height of the child element without overflowing. That is, Internet Explorer 6 treats the height declaration as the minimum height of an element. This is a bug.

In Internet Explorer 7, when the content area of an element overflows its containing block, unlike other browsers, the element's background image or color covers the elements that follow. This can be fixed by using the Internet Explorer-only declaration zoom:1 on the elements that follow the containing block.

Internet Explorer 6 and Internet Explorer 7 ignore the height:inherit declaration. Therefore, this declaration must be avoided.

Internet Explorer 6 and Internet Explorer 7 sometimes render elements in unexpected ways when using the height property. This can often be fixed by using the Internet Explorer-only declaration zoom:1 on the containing element.

The width Property

The width property is used to specify the width of the content-area of block-level elements, inline replaced elements and other elements to which the declarations display:block or display:inline-block have been applied.

By default, the width of an element is dependant on the width of the viewport of the web browser window.

Its initial value is auto. It is not an inherited property. It can take length values, percentages and the keywords auto and inherit. Percentage values refer to the width of the containing block element. Negative values are not allowed.

width with px values

In the example below the width property is applied to a block-level element.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';width:300px">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

The width property cannot be applied to inline-level non-replaced elements. However, it can be applied to inline-level replaced elements such as img.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';">the <img src="20x50.jpg" alt="20x50.jpg">quick <img style="width:50px" src="20x50.jpg" alt="20x50.jpg"> lazy dog.</p>

 

In the above example, note how the second image is scaled proportionally so that the width is 50px. In Firefox 3, Firefox 3.5 and Internet Explorer 8, the resized image is also anti-aliased. However, in Internet Explorer 6 and Internet Explorer 7, the image is not anti-aliased.

width with percentage values

With the width property, percentage values refer to the width of the containing element. All the displayed elements of a web page have the body element as an ancestor. Therefore, if an element has no other parent, then percentage widths will refer to the width of the body element. The default width of the body element is equal to the width of the viewport excluding any padding and margins of the html element.

Example 3: <div style="font-size:35px;font-family:'Times New Roman';width:750px;background-color:purple"><p style="width: 75%">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p></div>

In the above example, the width of the <p> is 75% of the width of the parent element (750px). This computes to 562.5px, which rounds off to 563px.

width with em values

em values values refer to the font size of the element.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';width:14.29em">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly.</p>

In the above example, the width of the <p> is 14.29*35px = 500.15px

width:auto

Since auto is the initial value of width, the width:auto declaration is only useful to override another width declaration that has been applied to an element.

width:inherit

width is not an inherited property. However, the width:inherit declaration can be used in order that an element inherits the width declaration of its parent.

Internet Explorer 6 and Internet Explorer 7 ignore the width:inherit declaration.

Concluding Notes

In Firefox 3, Firefox 3.5, Internet Explorer 7 and Internet Explorer 8, when the width of the content area + padding + margins of an element is more than the specified width of its containing element, the element overflows out of the content area of the containing element. However, in Internet Explorer 6 the width of the containing element is increased to accomodate the child element without overflowing. That is, Internet Explorer 6 treats the width declaration as the minimum width of an element. This is a bug.

Internet Explorer 6 and Internet Explorer 7 ignore the width:inherit declaration. Therefore, this declaration must be avoided.

The color Property

The color property specifies the foreground color of an element. The foreground color applies to text. It also applies to borders when there is no border-color declaration.

The color property can take, as values, color keywords, system color keywords, hexadecimal color notation, decimal functional rgb notation, percentage functional rgb notation and the keyword inherit.

color with Color Keywords

For a list of color keywords, see Specifying Color in CSS. Below is an example that uses a CSS 2.1 color keyword.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';color:aqua">the quick brown fox jumps over the lazy dog</p>

Below is an example that uses a CSS 3 color keyword.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';color:crimson">the quick brown fox jumps over the lazy dog</p>

color with System Color Keywords

To mimic the appearance of the viewer's operating system's GUI, the colors of text elements need to match the viewers OS. For this, system color keywords can be used. see Specifying Color in CSS for more info. Below is an example.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';color:WindowText">the quick brown fox jumps over the lazy dog</p>

color with Functional rgb Values

The color property can have a value specifying a color in the decimal functional rgb notation.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';color:rgb(255,105,180)">the quick brown fox jumps over the lazy dog</p>

The color can also be specified in the percentage functional rgb notation.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';color:rgb(100%,49.8%,31.3%)">coral the quick brown fox jumps over the lazy dog</p>

In the above example, the color value can also be expressed as rgb(255, 127,80)

color with Hexadecimal Notation

The values of red, green and blue can be specified as hexadecimal numbers in a color declaration. The value consists of a pound symbol (#) followed by the hexadecimal values of red, green and blue. There are no spaces.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';color:#FF7F50">coral the quick brown fox jumps over the lazy dog</p>

In the above example, the color in decimal rgb notation is rgb(255,127,80).

A hexadecimal notation value can be shortened if the value of each primary color consists of a repeated number or letter.

Example 7: <p style="font-size:35px;font-family:'Times New Roman';color:#AD9"> the quick brown fox jumps over the lazy dog</p>

In the above example, the color value can be expanded to #AADD99 which is equivalent to rgb(170,221,153).

color with inherit

Since color is an inherited property, the only use of the color:inherit declaration is to override another CSS color declaration on an element. Internet Explorer 6 and Internet Explorer 7 ignore the color:inherit declaration.

The Border Properties

The border of an element is one or more lines that surround the padding of an element. If there is no padding then the border surrounds the content area of the element. Borders are drawn over any background color or background image that the element has.

CSS allows specifying the top, right, bottom and left borders of an element individually. The table below shows all the CSS border properties:

border	border-width	border-style	border-color
border-top	border-top-width	border-top-style	border-top-color
border-right	border-right-width	border-right-style	border-right-color
border-bottom	border-bottom-width	border-bottom-style	border-bottom-color
border-left	border-left-width	border-left-style	border-left-style

The border property is the most general CSS border property. With this property, the border-width, border-style and border-color can be specified as space separated values. It can also take the single keyword inherit.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';border:inset 9px lime">the quick brown fox jumps over the lazy dog</p>

In the above example, the border-width is 9px, the border-style is inset, and the border-color is lime. The order in which the values are specified is not important.

The properties border-width, border-style and border-color specify a border's width, the kind of border and the color of the border, respectively. When these properties have a single value, that value applies to all the four borders of an element. However, each of these properties can also have up to four space-separated values that allow specifying the properties of the top, right, bottom and left borders individually. When only two values are specified, the first value refers to the top and bottom borders and the second value refers to the right and left borders. When three values are specified, the first value refers to the top border, the second value to the right and left borders, and the third value refers to the bottom border.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dashed dotted double groove">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

 

The properties border-top, border-right, border-bottom, and border-left specify the width, style and color of the border of each side of an element individually.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';border-top:dotted 8px blue">the quick brown fox jumps over the lazy dog</p>

 

Percentage values are not allowed with any of the border properties. For specifying border width, em values are allowed and refer to the font size of the element that matches the CSS declaration. None of the border properties are inherited. The border properties can be applied to any element.

The most specific border properties are border-top-width, border-right-width, border-bottom-width, border-left-width, border-top-color, border-right-color, border-bottom-color, border-left-style,

The properties border-top-style, border-right-style, border-bottom-style, and border-left-style, can be used to apply a specific border style to a single side of an element. These properties have the initial value none. Therefore, no borders appear on an element unless it has a border style declaration.

Borders are drawn outside the content area of an element, surrounding the padding. However, any background image or background color of the element also appears under the border. In Internet Explorer 6 and Internet Explorer 7 when an element has hasLayout the, background of the element is not rendered under the border. This is a bug.

The border-width Property

The border-width property can have, as values, the keywords thin, medium, thick and inherit, or length values. It can have up to four space-separated values, which allows setting the border width of each side of an element individually. There is no initial value. The width of individual borders can also be set using the properties border-top-width, border-right-width, border-bottom-width and border-left-width. These properties have the initial value medium.

Example 4: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px 2px 8px 10px;border-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-width:thin results in a 1px border, border-width:medium results in a 3px border, border-width:thick results in a 5px border. However in Internet Explorer 6 and Internet Explorer 7, the widths are 2px, 4px and 6px respectively.

When an inline non-replaced element (such as a span) has top and bottom borders, the height of the content area of the parent element does not increase to accommodate large borders. Large top and bottom borders overflow the content area of the parent element. However, the left and right borders take up horizontal space on a line and therefore never overlap any characters (including spaces) that appear to the left or right of them.

Large top borders on inline non-replaced elements may cover text that is vertically above it. Large bottom borders on inline non-replaced elements may be overlapped by text that is vertically below it. This can be seen in the example below.

Example 5: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing wizards jump quickly. the quick brown <span style="border-width:15px;border-style:solid;border-color:lime">fox</span> jumps over the lazy dog. the five boxing wizards jump quickly</p>

When an inline replaced element (such as an image) has top a large top border, the content area of the containing block element expands to accommodate it. The edge of the bottom border will be on the baseline of the parent element. Just like on inline non-replaced elements, left and right borders take up horizontal space on a line and therefore never overlap any characters (including spaces) that appear to the left or right of them.

Example 6: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing w<img src="20x50.jpg" alt="20x50.jpg" style="border-width:15px;border-style:dashed;border-color:lime">izards jump quickly</p>

When there is insufficient space for a border, it overflows the content area of the containing element. When a border overflows the viewport, the browsers inserts a horizontal scrollbar to view it. On elements with unmodified positioning, only bottom and right borders can overflow.

Example 7: <div style="font-size:35px;font-family:'Times New Roman';height:140px;width:300px;border-width:3px;border-style:dashed;border-color:aqua"> <p style="height:135px;width:295px;border-width:3px;border-style:dashed;border-color:blue">the quick brown fox jumps over the lazy dog</p> </div>

border-top-width, border-right-width, border-bottom-width, and border-left-width

Using these properties, different border widths can be specified for each side of an element's border.

Example: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-top-width:5px;border-right-width:2px;border-bottom-width:8px;border-left-width:10px;border-color:blue">the quick brown fox jumps over the lazy dog.</p>

The same effect can also be obtained using the border-width shorthand property with four space-separated values.

Example: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px 2px 8px 10px;;border-color:blue">the quick brown fox jumps over the lazy dog.</p>

The border-style Property

The border-style property can have, as values, the keywords none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. There is no initial value. It can have upto four space-separated values, which allows setting the style of each side of an element individually. The style of individual borders can also be set using border-top-style, border-right-style, border-bottom-style, border-left-style. The initial value of these properties is none.

border-style:solid

border-style:solid creates a border that consists of a straight line that does not have any gaps or decoration.

Example 8: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:solid">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:dashed

border-style:dashed creates a border consisting of a straight line with gaps at regular intervals.

Example 9: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dashed">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

 

The above screenshot was taken in Firefox. In Internet Explorer (6, 7 and 8), the appearance of the border is slightly different — the width of the gaps and the intervals at which they appear is different.

The gap-width and gap-interval depends on the width of the border. In Firefox, the gap-width and the gap-interval is the three times the border-width. Therefore, in the above example, the gap-width and the gap-interval of the border is 15px. In Internet Explorer, the gap-width is equal to the width of the border and the gap-interval is twice the width of the border. Therefore, in the above example, the gap-width is 5px and the gap-interval is 10px.

border-style:dotted

border-style:dotted creates a dotted border. In Firefox, each dot is an anti-aliased square whose side is equal to the width declaration of the border. In Internet Explorer, each dot is approximately diamond shaped, without anti-aliasing and has a height and width is equal to the width declaration of the border. The space between the dots is equal to the width declaration of the border.

Internet Explorer 6 renders a 1px dotted border like a 2px dashed border. This is a bug.

Firefox puts a pointed angle at each corner of an element with a dotted border.

Example 10: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dotted">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:double

border-style:double creates two thin sub-borders separated by a gap. The sum of the widths of each sub-border and the gap in between is equal to the specified border width.

In Firefox the two sub-borders are always of the same width. In Internet Explorer the width of the sub-borders may be different. The minimum border width necessary for a double border is 3px. In that case, the width of each sub-border and the in-between gap will be 1px.

Example 11: <p style="font-size:35px;font-family:'Times New Roman';border-width:7px;border-style:dotted;border-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

  

border-style:groove

border-style:groove creates a border that has the appeareance of a groove. The browser achieves this by creating a kind of double border that has lines of two colors — one in the same color as the foreground color or the color specified in the border-color declaration and the other line of a lighter shade. The inner and outer colors are flipped in each right angle.

Notes: Internet Explorer 6 and Internet Explorer 7 do not render the groove border in the foreground color (when there is no border-color declaration). This is a bug. The shades of the colors of  a groove border differs between Internet Explorer 8 and Firefox.

The minimum width of a groove border is 2px. At 1px a groove border is rendered as a 1px solid line.

Example 12: <p style="font-size:35px;font-family:'Times New Roman';border-width:8px;border-style:groove">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:ridge

border-style:ridge creates a border similar to a groove border, but with the colors of each right angle flipped. This is supposed to give the border the appearance of being raised.

border-style:inset

border-style:inset creates a border that is supposed to give the box of the element the appeareance of being embedded in the page. Firefox creasts a border consisting of two colors — one is the foreground color or in the color specified by the border-color declaration and the other is a lighter shade. Internet Explorer 6, 7 and 8 create a border having four colors — the top right angle consisting of two dark shades and the bottom right angle consisting of two lighter shades. The shades are darker in Internet Explorer 8 compared to Internet Explorer 6 and 7.

Note: Internet Explorer 6 and Internet Explorer 7 do not render inset borders in the foreground color (when there is no border-color declaration). This is a bug.

Example 13: <p style="font-size:35px;font-family:'Times New Roman';border-width:8px;border-style:inset">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:outset

border-style:outset creates a border that is supposed to give the box of the element the appeareance of being raised on the page. Firefox creasts a border consisting of two colors — one is the foreground color or in the color specified by the border-color declaration and the other is a lighter shade. Internet Explorer 6, 7 and 8 create a border having four colors — the bottom right angle consisting of two dark shades and the toop right angle consisting of two lighter shades. The shades are darker in Internet Explorer 8 compared to Internet Explorer 6 and 7.

Note: Internet Explorer 6 and Internet Explorer 7 do not render outset borders in the foreground color (when there is no border-color declaration). This is a bug.

border-style:outset creates a border similar to border-style:inset but with the color of the right angles flipped.

border-style:hidden and border-style:none

These declarations prevent the border from being rendered. No space is allocated to them either. In a table cell with border-style:none, a border might still appear because of border declarations on adjoining cells. However, if a table cell has the declaration border-style:hidden, then no borders are rendered on it, not even the borders of adjoining cells.

Example 14: <p style="font-size:35px;font-family:'Times New Roman';border-width:20px;border-style:none">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-style:inherit

The border-style:inherit declaration causes an element to inherit its parent element's border style. Internet Explorer 6 and Internet Explorer 7 ignore this declaration.

border-top-style, border-right-style, border-bottom-style and border-left-style

Using these properties, different border styles can be specified for each side of an element's border.

Example 15: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-top-style:dashed; border-right-style:dotted;border-bottom-style:double;border-left-style:groove">the quick brown fox jumps over the lazy dog</p>

The same effect can also be achieved using a border-style declaration with four values.

Example 16: <p style="font-size:35px;font-family:'Times New Roman';border-width:5px;border-style:dashed dotted double groove">the quick brown fox jumps over the lazy dog</p>

The border-color Property

border-color specified the color of the border. When there is no border-color declaration, borders are rendered in the foreground color. If there is both a border-color and a color declaration, the border is rendered in the color specified by border-color.

border-color:transparent

border-color:transparent causes a border to be transparent. Therefore, the border occupies space but is not visible. Internet Explorer 6 ignores this declaration. This is a bug.

Example 17: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:20px;border-color:transparent">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

border-color:inherit

The border-color:inherit causes an element's border to inherit the border color of its parent element. Internet Explorer 6 and 7 ignore the border-color:inherit declaration. In Internet Explorer 8, the border color is only inherited if the parent element has a border-color declaration.

border-left-color, border-top-color, border-right-color and border-bottom-color

Using these properties, colors of each border can be specified individually. When borders of two different colors meet at a corner, each border ends with a 45 degree angle as shown in the figure below.

Example 18: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px;border-top-color:aqua; border-right-color:fuchsia;border-bottom-color:green;border-left-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

 

Individual border colors can also be specified using more than one value in the border-color specification. An example is shown below.

Example: <p style="font-size:35px;font-family:'Times New Roman';border-style:solid;border-width:5px;border-top-color:aqua; border-right-color:fuchsia;border-bottom-color:green;border-left-color:blue">the quick brown fox jumps over the lazy dog. the five boxing wizards jump quickly</p>

Borders on Inline Non-replaced Elements

Borders can be applied to inline non-replaced elements such as spans. The right and left borders of an inline element take up horizontal space on the line and therefore elements on the left and right are moved by the borders. However, no extra vertical space is allocated to the top and bottom borders, this may cause them to overlap other elements.

Example 19: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing wizards jump quickly. the quick brown <span style="border-width:15px;border-style:solid;border-color:lime">fox</span> jumps over the lazy dog. the five boxing wizards jump quickly</p>

  

Borders on Inline Replaced Elements

Borders can be applied to inline replaced elements such as images. The behaviour of borders on inline replaced elements is different from non-replaced inline elements. Unlike non-replaced inline elements, space is allocated for all the borders of an inline replaced element.

In the case of images, the bottom border is aligned to the baseline of the font.

Example 20: <p style="font-size:35px;font-family:'Times New Roman';">the five boxing w<img src="20x50.jpg" alt="20x50.jpg" style="border-width:15px;border-style:dashed;border-color:lime">izards jump quickly</p>

 

The border Property

border is a shorthand property. That is, it allows specifying the values of border-width, border-style, and border-color in a single declaration. Each sub-property can have only one value. Therefore, the border declaration applies to all four sides of an element's border. If, in a border declaration, a particular sub-value is not specified, then the elemen't borders get the initial value. Therfore, not specifying border-style is the same as specifying the value none. Not specifying border-width is the same as specifying the value medium. Not specifying border-color is the same as specifying the value of color of that element.

Example 21: border: cornsilk 20px solid;

The order of the sub-values is not important. Therfore the above declaration is equivalent to border: 20px solid cornsilk.