CSS/Properties/border-bottom-style

From W3C Wiki
< CSS‎ | Properties
Revision as of 18:01, 19 July 2011 by Plehegar (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

border-bottom-style

The border-bottom-style property specify the line style of the bottom border of a box.

Description

Values [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit
Initial value none
Applies to all elements
Inherited No


Values

  • none
    No border.


  • hidden
    Same as 'none', except in terms of border conflict resolution for table elements.


  • dotted
    The border is a series of dots.


  • dashed
    The border is a series of short line segments.


  • solid
    The border is a single line segment.


  • double
    The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.


  • groove
    The border looks as though it were carved into the canvas.


  • ridge
    The opposite of 'groove': the border looks as though it were coming out of the canvas.


  • inset
    The border makes the box look as though it were embedded in the canvas.


  • outset
    The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 h1 {
   border-top-style: solid;
   border-right-style: dotted;
   border-bottom-style: dashed;
   border-left-style: double;
   border-width: 3px;
 }

[index.html]

  <body>
    <h1>CSS border property example</h1>
  </body>

Csslist2 border-style.png

CSS Reference

The CSS specification defines the border-bottom-style property in 8.5.3 Border style.

See also