CSS Property border-style








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

Summary

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

CSS Syntax

border-style: style [ style style style ]

border-style can have one to four values.

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.

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





Property Values

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




Browser compatibility

border-style Yes Yes Yes Yes Yes

Example

An example showing how to use border-style CSS property. 

<!DOCTYPE HTML>
<html>
<head>
    <style>
    body {<!-- www . 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