Border（边框）是包裹在所有 HTML 元素外围的边界线条。默认情况下，边框会添加在模块尺寸的外侧，只会增加元素的整体大小，不会压缩、改变模块的内部留白区域。
在默认状态下，边框会显示在模块外部。如果想要让边框贴合在模块内部、且不改变元素整体尺寸，需要使用属性 box-sizing: border-box。
若需要让页面中所有边框都内置显示、避免页面布局错乱，可对所有元素统一设置该属性，代码如下：
- {
box-sizing: border-box;
}
以常用的 .main 模块为例，具体使用效果如下：
.main{
margin: 0 auto;
width: 800px;
height: 400px;
border: 50px solid yellowgreen;
}
基础通用 border 属性
border 是简写属性，可同时定义边框的三项核心参数：边框粗细、线条样式、边框颜色。示例代码：border: 40px solid yellowgreen;.我们可以单独为模块的四条边设置不同粗细的边框，数值顺序固定：上边框 - 右边框 - 下边框 - 左边框。示例代码：border-width: 20px 10px 30px 15px;
边框线条样式（border-style）
border-style 属性用于控制边框线条的外观样式，常用取值如下：
- solid：实线边框（最常用样式）；
- dashed：虚线边框；
- dotted：点状边框；
- double：双层边框；
- none：取消边框、无边框效果。
边框圆角设置（border-radius）
border-radius 属性可以将元素尖锐的直角边角修改为圆润的圆角。常规圆角设置示例：border-radius: 10px;。将元素设置为正圆形示例：border-radius: 50%;