实例

设置 4 个边框的样式：

p
  {
  border:5px solid red;
  }

亲自试一试

浏览器支持

所有浏览器都支持 border 属性。

注释：IE7 以及更早版本的浏览器不支持值 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。

定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

• border-width

• border-style

• border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

可能的值

相关页面

CSS 教程：CSS 边框

HTML DOM 参考手册：border 属性

实例

设置四个边框的宽度：

p
  {
  border-style:solid;
  border-width:15px;
  }

亲自试一试

浏览器支持

所有浏览器都支持 border-width 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

例子 1

border-width:thin medium thick 10px;

• 上边框是细边框

• 右边框是中等边框

• 下边框是粗边框

• 左边框是 10px 宽的边框

例子 2

border-width:thin medium thick;

• 上边框是 10px

• 右边框和左边框是中等边框

• 下边框是粗边框

例子 3

border-width:thin medium;

• 上边框和下边框是细边框

• 右边框和左边框是中等边框

例子 4

border-width:thin;

• 所有 4 个边框都是细边框

可能的值

相关页面

CSS 教程：CSS 边框

HTML DOM 参考手册：borderWidth 属性

实例

设置 4 个边框的样式：

p
  {
  border-style:solid;
  }

亲自试一试

浏览器支持

所有浏览器都支持 border-style 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit" 或 "hidden"。

定义和用法

border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

例子 1

border-style:dotted solid double dashed; 

• 上边框是点状

• 右边框是实线

• 下边框是双线

• 左边框是虚线

例子 2

border-style:dotted solid double;

• 上边框是点状

• 右边框和左边框是实线

• 下边框是双线

例子 3

border-style:dotted solid;

• 上边框和下边框是点状

• 右边框和左边框是实线

例子 4

border-style:dotted;

• 所有 4 个边框都是点状

可能的值

描述

最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。

相关页面

CSS 教程：CSS 边框

HTML DOM 参考手册：borderStyle 属性

实例

设置 4 个边框的颜色：

p
  {
  border-style:solid;
  border-color:#ff0000 #0000ff;
  }

亲自试一试

浏览器支持

所有浏览器都支持 border-color 属性。

注释：Internet Explorer 6（以及更早的版本）不支持属性值 "transparent"。

注释：IE7 以及更早版本的浏览器不支持值 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。

定义和用法

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。请看下面的例子：

例子 1

border-color:red green blue pink;

• 上边框是红色

• 右边框是绿色

• 下边框是蓝色

• 左边框是粉色

例子 2

border-color:red green blue;

• 上边框是红色

• 右边框和左边框是绿色

• 下边框是蓝色

例子 3

border-color:dotted red green;

• 上边框和下边框是红色

• 右边框和左边框是绿色

例子 4

border-color:red;

• 所有 4 个边框都是红色

要记住，边框的样式不能为 none 或 hidden，否则边框不会出现。

注释：请始终把 border-style 属性声明到 border-color 属性之前。元素必须在您改变其颜色之前获得边框。

可能的值

相关页面

CSS 教程：CSS 边框

HTML DOM 参考手册：borderColor 属性