html - 使边框出现在顶部

Question

我编写代码使边框出现在网站顶部，但边框出现在代码的所有 4 个边上。请纠正我。 <强> 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

那是因为:

1. 规则border-style: solid。

删除:

border-style: solid;           /* -- remove this */
border-top: thick solid #000;  /* make the style solid here */

border-style 适用于所有边框。您需要将样式限制为 border-top。

1. single 不是一种风格。您可能在这里指的是 solid。

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>