一、边框属性
1、border:复合属性。设置对象边框的特性。
取值：
border-width: 设置或检索对象边框宽度。
border-style: 设置或检索对象边框样式。
border-color: 设置或检索对象边框颜色。
#border4
{
width: 100px;
height: 100px;
border:1px solid #FF0000;
}
<div id="border4"></div>
2、border-width:设置对象的边框宽度。
取值：
meadium: 定义默认厚度的边框
thin: 定义比默认厚度细的边框。
thick: 定义比默认厚度粗的边框。
★ 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
也可以分别对四边设置边框：
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
<style>
#border1{
width:200px;
height:100px;
border:solid;
/*border-width: 5px;*/
border-width:2px 3px 4px 5px ;
}
</style>
<div id="border1"></div>
3、border-color：设置或检索对象的边框颜色
取值：
（1）英文单词的颜色，如“blue”、“red”
（2）十六进制值，如“#ffffff”、“#ff0000”
（3）rgba、rgb，如rgba（0,0,0，.5）、rgb（255,255,255）
<style>
#border2
{
width: 200px;
height: 100px;
border: solid;
border-color: #FF0000;
}
</style>
<body>
<div id="border2"></div>
</body>
4、border-style:设置对象的边框样式
取值：
none：无轮廓。border-color与border-width将被忽略
hidden：隐藏边框。IE7及以下尚不支持
dotted：点状轮廓。IE6下显示为dashed效果
dashed：虚线轮廓。
solid： 实线轮廓。
double：双线轮廓。两条单线与其间隔的和等于指定的border-width值
可以对四边分别设置其边框样式：
#border3
{
width: 200px;
height: 100px;
border: solid;
border-top-style:dotted ;
border-left-style:dashed ;
border-right-style: double;
border-bottom-style: solid;
}
<div id="border3"></div>
5、border-radius:设置对象使用圆角边框
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
取值
length：用长度值设置对象的圆角半径长度。不允许负值
- percentage：用百分比设置对象的圆角半径长度。不允许负值
CSS代码
#yj{
background-color:indianred ;
width: 100px;
height: 100px;
border-radius: 10px 10px 20px 20px;
}
HTML代码：
<div id="yj"> </div>