元素的边框是围绕元素内容和内边距的一条或多线线
边框的样式
使用border-style属性定义边框的样式,样式控制着边框的显示,如果没有样式,将根本没有边框
可以为边框定义多个样式,例如
p {
border-style:solid dotted dashed double;
}
上面这条规则为段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
同样也可以只对某一条边框进行定义
p {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: double;
}
这样和使用border-style效果是一样的
边框的宽度
可以使用border-width属性来设置边框的宽度,可以使用数值指定长度,也可以使用三个关键字之一:thin、medium(默认值)和thick
所以可以这样设置四条边框的宽度
p {
border-style:solid dotted dashed double;
border-width: 5px;
}
或者
p {
border-style:solid dotted dashed double;
border-width: thick;
}
当然也可以定义单个边框的宽度
p {
border-style: solid;
border-top-width: thick;
border-right-width: 10px;
border-bottom-width: 0.25em;
border-left-width: 10ex;
}
边框的颜色
使用border-color属性可以设置边框颜色,可以使用命名颜色,rgb或十六进制
p {
border-style: solid;
border-color:blue rgb(35%,25%,45%) #909090 red
}
同样也可以只对单边进行设置
p {
border-style: solid;
border-top-color: blue;
border-right-color: rgb(35%,25%,45%);
border-bottom-color: #909090;
border-left-color: red;
}