Cascading Style Sheets/Borders

CSS offers various ways of setting the appearance the borders of box elements, separately for top border, bottom border, left border and right border. You can set the thickness or width, color and style (such as dotted) of each border.

Border style

 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1

The following values are valid for the border style properties:    CSS2.1      </li> <li style="margin: 0.5em; padding: 0.5em; border-style: inset;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: outset;"></li> </ul>

CSS rule:

Sample HTML:

Border width

 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1

The border width properties can be set to any non-negative length or one of the three keyword values, and. A border is guaranteed to be at least as wide as a  border, which in turn is at least as wide as a  border.

CSS rules:

Sample HTML: increments.

If the border style for a side has been set to the width for that border is considered to be zero regardless of the value set for the side's border width.

CSS rules:

Sample HTML: border. The left border of this paragraph has been set to. Notice that the border width has effectively been set to zero.

Border color

 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1
 * W3C Specification CSS2.1

The border color properties may be set to any CSS color or the keyword. If no color is specified the border color properties default to the value of the for the element.

Example 1

CSS rule:

Sample HTML:

Example rendering:

Example 2

CSS rules:

Sample HTML:

Example rendering:

Shorthand properties

 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1


 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1
 * W3C Specification CSS1 CSS2.1


 * W3C Specification CSS1 CSS2.1

Creates a black line around the content and padding of all  elements. In this example the first value is the color, the second value is the line type and the third value is the line thickness. The values for the individual properties may appear in any order. The following two rules are equivalent to the previous rule.

Border radius
Border radius styles are a part of the CSS3 background and borders module. Currently  is supported by WebKit (Safari, Chrome et al.) & Presto (Opera). Gecko (Firefox, Iceweasel) supports it with the  prefix and slightly different syntax. Trident (Internet Explorer) will support it in the next version, version 5 (IE 9). WebKit has only recently supported it without prefix, so designers may wish to keep the  prefix in their sheets for backwards compatibility for a little while longer.

Syntax: border-radius: [ | ]{1,4} [ / [ | ]{1,4} ]?;

border-top-left-radius: [ | ] [ | ]?; border-top-right-radius: [ | ] [ | ]?; border-bottom-right-radius: [ | ] [ | ]?; border-bottom-left-radius: [ | ] [ | ]?;

Border radius takes at least 1 length per argument for the length of the radius of that corner. Two radii with a  between indicate that it is an ellipse.

Taking an earlier example:

Sample HTML:

Example rendering:

The border radius can be applied to any type of border the designer wishes (though care must be taken that it looks good): <ul> <li style="margin: 0.5em; padding: 0.5em; border-style: none; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: hidden; border-radius: 10px; -moz-border-radius: 10px;"> CSS2.1</li> <li style="margin: 0.5em; padding: 0.5em; border-style: dotted; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: dashed; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: solid; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: double; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: groove; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: ridge; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: inset; border-radius: 10px; -moz-border-radius: 10px;"></li> <li style="margin: 0.5em; padding: 0.5em; border-style: outset; border-radius: 10px; -moz-border-radius: 10px;"></li> </ul>

Mixed radii
The radii of the 4 corners need not be the same length. You can mix and match any combination of radii you wish.

<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px;"> This div is suited for the top of a web page. Putting a 0 in without a unit indicates that no radius is to be applied.

<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px"> Conversely, this one is suited for the bottom of a page.

<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; border-radius: 10px 0 10px 0; -moz-border-radius: 10px 0 10px 0; height: 100px; width: 100px;"> You can also make something fancy.

Border radius ellipses
Giving two lengths in an argument separated by a  will produce an ellipse for that corner or corners.

<div style="margin: 0.5em; padding: 0.5em; border: thin solid; border-radius: 5px / 10px;"> A div with.

<div style="margin: 0.5em; padding: 0.5em; border: thin solid; border-radius: 10px / 5px;"> A div with.

Border image
TBD

Collapsing border
For collapsing borders in tables, see chapter ../Tables/.