border-style: ***; border-***-style: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The border-style and border-***-style properties sets the border style of an element.
(*** = top, bottom, left, and right)

  • border-style : This is a shorthand property for setting the style for the four borders.
  • border-***-style : Sets the style of the top, bottom, left, and right borders.

div {
border-width: thick;
border-color: red;
border-style: solid;
}

p {
border-width: medium;
border-color: red;
border-top-style: solid;
border-right-style: double;
border-bottom-style: dotted;
border-left-style: dashed;
}

border-style : This is a shorthand property for setting the style for the four borders.

Property Value Explanation
border-style solid, double, groove,ridge,
inset, outset,dotted, dashed, none		 the top, bottom, left, and right borders

The default is "none".

  • border-style: solid; : [all sides] borders
  • border-style: dashed double; : [top, bottom] [left, right] borders
  • border-style: dashed double dotted; : [top] [left, right] [bottom] borders
  • border-style: solid dashed double dotted; : [top] [right] [bottom] [left] borders

border-***-style : Sets the style of the top, bottom, left, and right borders.

Property Value Explanation
border-top-style solid, double, groove,ridge,
inset, outset,dotted, dashed, none		 the top border
border-right-style the right border
border-bottom-style the bottom border
border-left-style the left border

The default is "none".

The styles example

solid

double

groove

ridge

inset

outset

dotted

dashed

none (Default)

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

h2, h3, span {
border-width: medium;
border-color: #000000;
}

.example1 {
border-style: dotted;
}
.example2 {
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: groove;
}

</style>

</head>
<body>

<h2 class="example1">Specifies a dotted border</h2>
<h3 class="example2">Specifies four styles</h3>
<p>Specifies a <span class="example1">dotted</span> border</p>

</body>
</html>
Output

Specifies a dotted border

Specifies four styles

Specifies a dotted border