Wikibooks

Cascading Style Sheets/Borders

< Cascading Style Sheets

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 edit

  • 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 edit

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 edit

  • 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 edit 

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 edit

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 edit

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 edit

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 edit

TBD

Collapsing border edit

For collapsing borders in tables, see chapter Tables.

External links edit

Retrieved from "https://en.wikibooks.org/w/index.php?title=Cascading_Style_Sheets/Borders&oldid=3677859"