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.