CSS 边框属性（border）

在 HTML 中，我们使用表格来创建文本周围的边框，但是通过使用 CSS 边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

• 边框有四个方向，并且可以单独设置某一个方向；
• 边框必须设置样式，也就是border-style属性；
• 边框默认颜色是黑色。

<style>
input[type=text]{
    border-top:1px dotted #ff0000;
    border-top-width:1px;
    border-top-style:dotted;
    border-top-color:#ff0000;

    border-left:1px dotted #ff0000;
    border-left-width:1px;
    border-left-style:dotted;
    border-left-color:#ff0000;

    border-right:1px dotted #ff0000;
    border-right-width:1px;
    border-right-style:dotted;
    border-right-color:#ff0000;

    border-bottom:1px dotted #ff0000;
    border-bottom-width:1px;
    border-bottom-style:dotted;
    border-bottom-color:#ff0000;

}
</style>

ps：其他方向的边框也可以这样书写;
ps：利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）

<style>
a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: red;}
</style>

CSS 轮廓属性（Outlines）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定了样式，颜色和外边框的宽度。

<style>
input[type=text]{
    outline:1px dotted #ff0000;
}
</style>