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

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The border and border-*** properties are a shorthand property for setting all border properties.
(*** = top, bottom, left, and right)

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

div {
border: thick red solid;
}

p {
border-top: 2px #85b9e9 solid;
border-right: 4px #bde9ba double;
border-bottom: 6px #ffd37d dotted;
border-left: 8px #d1d1d1 dashed;
}

border : This is a shorthand property for setting all border properties for the four borders.

Property Value Explanation
border each value sets width, color, and style

border: thick red solid;

The unnecessary values can be omitted.

border: thick solid;

Please note that the default value of border style is "none".

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

Property Value Explanation
border-top each value the top border
border-right each value the right border
border-bottom each value the bottom border
border-left each value the left border
  • border-top: 2px #85b9e9 solid;
  • border-right: 4px #bde9ba double;
  • border-bottom: 6px #ffd37d dotted;
  • border-left: 8px #d1d1d1 dashed;

Example


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

<style type="text/css">

h2 {
border-top: medium red dotted;
border-right: thick blue double;
border-bottom: medium green dashed;
border-left: thick gray groove;
}

h3, span {
border: medium red dotted;
}

</style>

</head>
<body>

<h2>Specifies four different borders</h2>
<h3>Specifies the red dotted border</h3>
<p>Specifies the <span>red dotted</span> border</p>

</body>
</html>
Output

Specifies four different borders

Specifies the red dotted border

Specifies the red dotted border