如何为HTML div标签设置边框

Question

我试图在HTML中的一个div标签周围定义一个边框，在某些浏览器中，该边框不会出现。

以下是我的HTML代码：

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

我该如何为HTML div标签设置边框？

- RKh

Answer 1

尝试明确指定所有边框属性。例如：

border:1px solid black;

请参考边框简写属性。虽然其他部分是可选的，但某些浏览器可能不会将宽度或颜色设置为您所期望的默认值。在您的情况下，我敢打赌除非指定否则宽度为零。

- Paolo

---

我不得不删除“px”后缀。 - samus

@samis，那不是你想要做的事情。 - Joel

Answer 2

可以使用

border-width:2px;
border-style:solid;
border-color:black;

或作为速记

border: 2px solid black

- user5089931

Answer 3

根据W3C标准：

由于边框样式的初始值为'none'，除非设置了边框样式，否则不会出现任何边框。

换句话说，您需要设置边框样式（例如solid），才能显示边框。border:thin仅设置边框的宽度。此外，默认情况下，颜色将与文本颜色相同（通常不太好看）。

我建议同时设置三种样式：

style="border: thin solid black"

- DisgruntledGoat

Answer 4

你可以使用：

border-style: solid;
border-width: thin;
border-color: #FFFFFF;

你可以根据自己的需要对这些进行更改。

- Andoni Henderer

---

你太棒了！感谢您发布这个（7年前）！ - Stryker2k2

Answer 5

我猜这是你所指的地方..

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

好的，必须写成border-width:thin

您可以点击这里查看链接，了解不同类型的边框样式

您也可以通过以像素为单位写入宽度（例如border-width：1px）来设置边框宽度，最小宽度为1像素。

- Rookie Programmer Aravind

Answer 6

您需要设置更多的字段，而不仅仅是border-width。这个样式基本上将边框放在页面上。宽度控制厚度，颜色告诉它要制作什么颜色的边框。

border-style: solid; border-width:thin; border-color: #FFFFFF;

- Jason Too Cool Webs

Answer 7

 .centerImge {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height:50%;
    }
 <div>
 @foreach (var item in Model)
{
<span> <img src="@item.Thumbnail"  class="centerImge" /></span>
  <h3 style="text-align:center">  @item.CategoryName</h3>
}
 </div>

- Muhammad Armaghan

Answer 8

在Bootstrap 4中，您可以像这样使用边框实用程序。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
  .border-5 {
    border-width: 5px !important;
  }
</style>

<textarea class="border border-dark border-5">some content</textarea>

- Penny Liu