Making border appear at the top - html

Question

I wrote code to make border appear at the top of the website but the border appears on all 4 sides of the code. Please correct me. JSFiddle.
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-style: solid;
border-top: thick single #000;
}
.center{
text-align: center;
}
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>

Answer 1

That is because of:
the rule border-style: solid.
Remove that:
border-style: solid; /* -- remove this */
border-top: thick solid #000; /* make the style solid here */
border-style applies to all borders. You need to keep your style limited to border-top.
single is not a style. You probably meant solid here.
Fiddle: http://jsfiddle.net/abhitalks/jpo80bjr/3/
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top: thick solid #000;
}
.center{ text-align: center; }
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>

Answer 2

Try to define the other borders to 0px, like:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-style: solid;
border-top: thick single #000;
border-bottom:0;
border-left:0;
border-right:0;
}
.center{
text-align: center;
}
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>

Answer 3

You can either write three separate properties:
border-width: ..;
border-style: ..;
border-color: ..;
Or you can combine them into one shorthand property:
border: .. .. ..;
border-style is equivalent to setting the style in border, it applies to all sides. If you just want to set the top border style, there's border-top-style for that. But since you're setting the border-top shorthand property anyway, just get rid of border-style.

Answer 4

That's because you set border-style: solid; which applies to all four borders (top, right, bottom, left) and defaults to black and ~4px. Also, single isn't a valid border value.
Try this:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top: thick solid #000;
}

Answer 5

fix your css. some browser auto complete css proporties you did not specify, based on those you did, like border, in your case:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-style: solid;
border-color: #000;
border-width: thick 0 0 0;
}
.center{
text-align: center;
}
<div id="box1">
<h3 class="center"> CALL US</h3>
</div>

Answer 6

Remove border-style: solid; because you are already using in border-top: thick solid #000; and single needs to be solid.
use css:
#box1{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top: thick solid #000;
}
find fiddle demo

Answer 7

Change border-style: solid; to border-top-style: solid;
JSFiddle
#box1
{
height: 50px;
background-color:#DFE4E6;
padding: 20px;
border-top-style: solid;
border-top: thick single #000;
}
.center
{
text-align: center;
}
<div id="box1">
<h3 class="center">CALL US</h3>
</div>