在网页设计中，边框是必不可少的元素之一，如果一个页面没有边框，会显得十分简单、乏味。通过CSS的border属性，可以轻松地为页面元素添加边框 ，这也是CSS经常使用到的一个属性。
一、 border的基本语法
border属性是一个综合属性，它可以一次性地设置一个元素的四个边框（left、right、top和bottom），
<div>元素是最常用到border属性的元素之一。下面是该属性的基本语法。
{
border: border-width border-style border-color;
}
其中，border-width、border-style、border-color分别是边框的宽度、样式和颜色属性。这里的三个属性值都是可选的，但是至少需要指定其中的一个，否则border属性不会起作用。
二、 border-width设置边框宽度
border-width属性用于设置边框的宽度，可以设置相同的宽度，也可以为每个边框设置不同的宽度。border-width属性值的单位有px、em、rem等。
下面是为一个元素添加10px边框的示例：
{
border-width: 10px;
}
也可以为每条边框分别设置不同的宽度。例如：
{
border-width: 10px 20px 30px 40px;
}
上述代码设置上、右、下、左四条边框的宽度分别为10px、20px、30px、40px。
三、 border-style设置边框样式
border-style属性用于设置边框的样式，可以设置如实线（solid）、虚线（dashed）、点线（dotted）、双线（double）等多种样式。默认情况下，所有的边框都是实线样式。
下面是设置边框为虚线的示例：
{
border-style: dashed;
}
也可以为每条边框分别设置不同的样式。例如：
{
border-style: solid dashed dotted double;
}
上述代码设置上、右、下、左四条边框的样式分别为实线、虚线、点线和双线。
四、 border-color设置边框颜色
border-color属性用于设置边框的颜色，可以为每条边框分别设置不同的颜色，也可以为所有边框设置相同的颜色。
下面是为所有边框设置红色的示例：
{
border-color: red;
}
也可以为每条边框分别设置不同的颜色。例如：
{
border-color: red green blue yellow;
}
上述代码设置上、右、下、左四条边框的颜色分别为红色、绿色、蓝色和黄色。
五、 border-radius设置圆角
border-radius属性用于设置边框的圆角效果，可以为每个角分别设置不同的值，也可以为所有角设置相同的值。
下面是为所有边框设置相同的圆角的示例：
{
border-radius: 10px;
}
也可以为每个角分别设置不同的圆角大小，例如：
{
border-radius: 10px 20px 30px 40px;
}
上述代码设置上、右、下、左四个角的圆角大小分别为10px、20px、30px、40px。
六、总结
CSS的border属性可以为网页的元素添加边框效果，通过border-width、border-style和border-color属性可以设置边框的宽度、样式和颜色，同时可以用border-radius属性来设置圆角效果。通过灵活使用这些属性，可以为页面添加各种不同的边框效果。