边框

边框有三个属性：

border-width、border-style、border-color

1.border-width属性

此属性是用于设置边框线的宽度，单位为像素(px)、点(pt)、厘米(cm)等，常用取值有thin、medium和thick。

代码如下

border-width: 数字+px;

2.border-style属性

此属性设置为边框的样式，包括实线、虚线、点状线等

值	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框

格式

border-style: 值

3.border-color属性

此属性可以设置边框的颜色

格式

border-color: 颜色名

三个属性在一起使用的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border-width: 3px;
            border-style: dotted;
            border-color: green;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

这个代码里面给div设置了高度和宽度方便体现边框感

效果如下

简写方式

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border: 3px dashed blue;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果如下

还有一个特别的属性

border-radius属性

该属性是用于实现圆角边框的效果。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border: 3px solid blue;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果如图

注意一点如果border-radius属性的大小等于高的属性或宽的属性的一半或者超过了，边框就会变成一个圆

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100px;
            border: 3px solid blue;
            border-radius: 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

效果如图