导航分类

CSS border 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

border是 CSS 中用于设置元素边框的简写属性，它可以一次性设置边框的宽度、样式和颜色。

border边框会增加元素的总尺寸（除非使用box-sizing: border-box）。

默认值：	medium none color
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS1
JavaScript 语法：	object.style.border="3px solid blue"

常用的实例

接下来通过多个实例演示border属性的用法，来深化您对border属性的理解。

1. 基础边框样式

实例代码运行代码

复制

.example {
    border: 2px solid blue;
}

2. 各边不同颜色

实例代码运行代码

复制

.example {
    border: 5px solid;
    border-color: red green blue orange;
}

3. 渐变色边框

实例代码运行代码

复制

.example {
    border: 5px solid;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue);
    border-image-slice: 1;
}

CSS 语法

border: border-width border-style border-color|initial|inherit;

属性值

值	描述
border-width	指定边框的宽度（如果省略，默认值为`medium`）。
border-style	指定边框的样式（必须指定，否则边框不会显示，即使设置了宽度和颜色）。
border-color	指定边框的颜色（如果省略，边框会继承元素的`color`文字颜色值。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。

浏览器支持

表中的数字指定了完全支持border属性的第一个浏览器版本。


Chrome	IE / Edge	Firefox	Safari	Opera
1.0	4.0	1.0	1.0	3.5

CSS border 属性

定义和用法

常用的实例

1. 基础边框样式

2. 各边不同颜色

3. 渐变色边框

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

CSS border 属性

定义和用法

常用的实例

1. 基础边框样式

2. 各边不同颜色

3. 渐变色边框

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功