Cascading Style Sheets/Borders

From Wikibooks, the open-content textbooks collection

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) or each border.

[edit] 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

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>

[edit] 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 guarenteed 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>

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>

[edit] 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:

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:

[edit] 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;
}

[edit] Border radius

Border radius styles are an upcoming part of CSS3, but are currently implemented by different syntaxes in Gecko and Webkit. Each argument takes just the size of the radius. Internet Explorer does not support any version of border-radius.

div {
  border-radius: 10px;
  -webkit-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:

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

[edit] Border image