边框属性 - 爱码网

格式：

border:边框宽度边框样式边框颜色

分别设置四条边表框：

border-top:边框宽度边框样式边框颜色

border-right:边框宽度边框样式边框颜色

border-bottom:边框宽度边框样式边框颜色

border-left:边框宽度边框样式边框颜色

注意点：

在border中，宽度与颜色可以省略，颜色默认为黑色；但是样式不可以省略，省略后看不到边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            height: 500px;
            width: 500px;
            border-top: 10px dotted blue;
            border-right: 10px solid yellow;
            border-bottom: 10px double red;
            border-left: 10px dashed black;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

边框属性

设置四条边的宽度： border-width:上右下左

设置四条边的样式：border-style:上右下左

设置四条边的颜色：border-color:上右下左

当省略某条边时，这条边的属性与对面的那条边相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div {
            height: 500px;
            width: 500px;
            border-width: 10px;
            border-style: dotted solid double dashed;
            border-color: blue yellow red black;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>