# 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

* border-top-style W3C Specification CSS2.1
* border-right-style W3C Specification CSS2.1
* border-bottom-style W3C Specification CSS2.1
* border-left-style W3C Specification CSS2.1
* border-style
The following values are valid for the border style properties:
* none
* hidden CSS2.1
* dotted
* dashed
* solid
* double
* groove
* ridge
* inset
* outset
CSS rule:
Sample HTML:
Different borders can be set on the four sides of an element.

## Border width

* border-top-width W3C Specification CSS1 CSS2.1
* border-right-width W3C Specification CSS1 CSS2.1
* border-bottom-width W3C Specification CSS1 CSS2.1
* border-left-width W3C Specification CSS1 CSS2.1
The border width properties can be set to any non-negative length or one of the three keyword values thin, medium and thick. A thick border is guaranteed to be at least as wide as a medium border, which in turn is at least as wide as a small border.
CSS rules:
Sample HTML:
The border on three sides of this paragraph are specified by keywords. The top border is zero width.
This paragraph's borders are given as lengths, increasing in quarter em increments.
If the border style for a side has been set to none 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:
This paragraph has a solid 1em border.
The left border of this paragraph has been set to none. Notice that the border width has effectively been set to zero.

## Border color

* border-top-color W3C Specification CSS2.1
* border-right-color W3C Specification CSS2.1
* border-bottom-color W3C Specification CSS2.1
* border-left-color W3C Specification CSS2.1
The border color properties may be set to any CSS color or the keyword transparent. If no color is specified the border color properties default to the value of the color for the element.
Example 1
CSS rule:
Sample HTML:
Example rendering:
For example the border of this box should have four different colours.
Example 2
CSS rules:
Sample HTML:
Example rendering:
This paragraph has red text and a red border.
This paragraph has green text and a green border.

## Shorthand properties

* border-top W3C Specification CSS1 CSS2.1
* border-right W3C Specification CSS1 CSS2.1
* border-bottom W3C Specification CSS1 CSS2.1
* border-left W3C Specification CSS1 CSS2.1
* border-color W3C Specification CSS1 CSS2.1
* border-width W3C Specification CSS1 CSS2.1
* border-style W3C Specification CSS1 CSS2.1
* border W3C Specification CSS1 CSS2.1
Creates a black line around the content and padding of all h1 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 border-radius is supported by WebKit (Safari, Chrome et al.) & Presto (Opera). Gecko (Firefox, Iceweasel) supports it with the -moz- 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 -webkit- prefix in their sheets for backwards compatibility for a little while longer.
Syntax:
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.
Syntax for each layout engine :
| CSS3 | WebKit | Gecko | Presto | Trident |
| border-radius | border-radius | -moz-border-radius | border-radius | border-radius |
| border-top-left-radius | border-top-left-radius | -moz-border-radius-topleft | border-top-left-radius | border-top-left-radius |
| border-top-right-radius | border-top-right-radius | -moz-border-radius-topright | border-top-right-radius | border-top-right-radius |
| border-bottom-right-radius | border-bottom-right-radius | -moz-border-radius-bottomright | border-bottom-right-radius | border-bottom-right-radius |
| border-bottom-left-radius | border-bottom-left-radius | -moz-border-radius-bottomleft | border-bottom-left-radius | border-bottom-left-radius |
Taking an earlier example:
Sample HTML:
Example rendering:
For example the border of this box should have four different colours and rounded corners.
The border radius can be applied to any type of border the designer wishes (though care must be taken that it looks good):
* none
* hidden CSS2.1
* dotted
* dashed
* solid
* double
* groove
* ridge
* inset
* outset

### 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.
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.
Conversely, this one is suited for the bottom of a page.
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.
A div with border-radius: 5px / 10px;.
A div with border-radius: 5px / 10px;.

## Border image

TBD

## Collapsing border

For collapsing borders in tables, see chapter Tables.

## External links

* 8.5 Border properties at Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, w3.org