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:

p {
  border-style-top: dotted;
  border-style-right: solid;
  border-style-bottom: dashed;
  border-style-left: groove;
  padding: 0.5em /* Leave a gap between the content and the borders. */
}

Sample HTML:

    <p>Different borders can be set on the four sides of an element.</p>

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:

p {
  border-style:solid;
  padding:0.5em /* Leave a gap between the content and the borders. */
}

#para1 {
  border-width-top:0;
  border-width-right:thin;
  border-width-bottom:medium;
  border-width-left:thick
}

#para2 {
  border-width-top:0.25em;
  border-width-right:0.5em;
  border-width-bottom:0.75em;
  border-width-left:1em
}

Sample HTML:

    <p id="para1">The border on three sides of this paragraph are specified by keywords.
      The top border is zero width.
    </p>
    <p id="para2">This paragraph's borders are given as lengths, increasing in quarter
     <code>em</code> increments.
    </p>

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:

p {
  border-style:solid;
  border-width:1em;
  padding:0.5em /* Leave a gap between the content and the borders. */
}

#para2 {
  border-style-left:none
}

Sample HTML:

    <p id="para1">This paragraph has a solid <code>1em</code> border.</p>
    <p id="para2">The left border of this paragraph has been set to <code>none</code>.
      Notice that the border width has effectively been set to zero.
    </p>

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:

p {
  border-style: solid;
  border-width: 2em;
  border-color-top: red;
  border-color-right: green;
  border-color-bottom: blue;
  border-color-left: yellow;
  padding: 0.5em; /* Leave a gap between the content and the borders. */
  width: 10em /* Narrow the box a bit. */
}

Sample HTML:

    <p>For example the border of this box should have four different colours.</p>

Example rendering:

For example the border of this box should have four different colours.

Example 2

CSS rules:

p {
  border-style: solid;
  border-width: 2em;
  padding: 0.5em /* Leave a gap between the content and the borders. */
}

#para1 {
  color: red
}

#para1 {
  color: green
}

Sample HTML:

    <p id="para1">This paragraph has red text and a red border.</p>
    <p id="para2">This paragraph has green text and a green border.</p>

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

h1 {
  border: black solid thin;
}

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.

h1 {
  border: solid black thin;
}

h1 {
  border: thin black solid;
}

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: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?;

border-top-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
border-top-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
border-bottom-right-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;
border-bottom-left-radius: [ <length> | <percentage> ] [ <length> | <percentage> ]?;

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

div {
  border-radius: 10px;
  -moz-border-radius: 10px;
}

Taking an earlier example:

p {
  border-style: solid;
  border-width: 2em;
  border-color-top: red;
  border-color-right: green;
  border-color-bottom: blue;
  border-color-left: yellow;
  padding: 0.5em; /* Leave a gap between the content and the borders. */
  width: 10em /* Narrow the box a bit. */
  border-radius: 2em;
}

Sample HTML:

    <p>For example the border of this box should have four different colours and rounded corners.</p>

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.

<div style="margin: 0.5em; padding: 0.5em; border: 1px solid; 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>

Conversely, this one is suited for the bottom of a page.

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

You can also make something fancy.

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

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

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