border-style

Description

border-style shorthand property sets the styles for the overall border of an element or for each side individually.

ItemValue
Inherited No.
Version CSS1
JavaScript syntax object.style.borderStyle="dotted double"
Applies to All elements.

border-style:dotted solid double dashed;

equals to

  • top border is dotted
  • right border is solid
  • bottom border is double
  • left border is dashed

border-style:dotted solid double;

equals to

  • top border is dotted
  • right and left borders are solid
  • bottom border is double

border-style:dotted solid;

equals to

  • top and bottom borders are dotted
  • right and left borders are solid

border-style:dotted;

equals to all four borders are dotted.

Syntax and Property Values


border-style: style [ style style style ]

Each individual style value can be set to a value of none, dotted, dashed, solid, double, groove, hidden, ridge, inset, or outset.

The property values are listed in the following table.

Value Description
none no border
hidden The same as "none", except in border conflict resolution for table elements
dotted a dotted border
dashed a dashed border
solid a solid border
double a double border
groove a 3D grooved border whose effect depends on the border-color value
ridge a 3D ridged border whose effect depends on the border-color value
inset a 3D inset border whose effect depends on the border-color value
outset a 3D outset border whose effect depends on the border-color value
inherit inherit the border style from the parent element

Example


<!DOCTYPE HTML>
<html>
<head>
    <style>
    body {<!--from   w w  w  . j av a2s .c o  m-->
      font-family: arial, verdana, sans-serif;
    }
    
    p {
      border-color: #000000;
    }
    
    .none {
      border-style: none;
    }
    
    .solid {
      border-style: solid;
    }
    
    .dotted {
      border-style: dotted;
    }
    
    .dashed {
      border-style: dashed;
    }
    
    .double {
      border-style: double;
    }
    
    .groove {
      border-style: groove;
    }
    
    .ridge {
      border-style: ridge;
    }
    
    .inset {
      border-style: inset;
    }
    
    .outset {
      border-style: outset;
    }
    
    .hidden {
      border-style: hidden;
    }
    </style>
</head>

<body>
    <p class="none">a border-style property set to none.</p>
    <p class="solid">a border-style property set to solid.</p>
    <p class="dotted">a border-style property set to dotted.</p>
    <p class="dashed">a border-style property set to dashed.</p>
    <p class="double">a border-style property set to double.</p>
    <p class="groove">a border-style property set to groove.</p>
    <p class="ridge">a border-style property set to ridge.</p>
    <p class="inset">a border-style property set to inset.</p>
    <p class="outset">a border-style property set to outset.</p>
    <p class="hidden">a border-style property set to hidden.</p>
</body>
</html>

Click to view the demo

The code above generates the following result.

border-style




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference