如何给表单框添加边框？

Question

我希望为Bootstrap表单框添加边框。我已经添加了边框样式属性，但是不起作用。请给予建议。

这是表单框的类：

<div class="form-box">
                   <div class="form-top">
                                <div class="form-top-left">

以下是 CSS 代码：

.form-box {
    margin-top: 0px;
      border-radius: 25px;
    border-bottom-style: solid;
    border-color: #50e54b;

}

- Esoteric maverick

---

你的意思是什么？似乎现有的边框或者应用新的边框都能正常工作。https://codepen.io/mcoker/pen/PKWEwp - Michael Coker

Answer 1

由于其他类的影响，使用“!important”。

border: solid 2px #50e54b!important;

- Farhad Bagherlo

Answer 2

你可以使用CSS属性[border](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border)向框添加边框。

以下是一个示例：

border: 1px solid #FFFFFF;

上面的代码将添加一个厚度为1像素、颜色为白色的实线边框。

点击上面的链接了解更多关于边框属性的信息。

- Nick Gatzouli

Answer 3

据我所知，这段代码运行良好。但是如果你想的话，可以添加8像素的内边距，以便内容有足够的空间进行布局而不是被挤在边框里面。顺便说一下，2像素或4像素的边框半径看起来更好，但这取决于你。

.form-box {
  padding: 8px; /*makes it look neat*/
  border-radius: 4px; /*or 2px*/
  border: 1px solid red;
}

- Clitson