如何利用HTML5和CSS3设置四边边框border边界线

1、第一步，在HBuilder开发工具创建静态页面border.html，并修改title内容，如下图所示：

2、第二步，在body元素内插入五个div，其中一个div包裹另外四个div，如下图所示：

3、第三步，添加第一个div样式

.one{

width: 400px;

height: 100px;

color: #FF0000;

border-width: 2px;

border-bottom: 1px solid #D2691E;

}

如下图所示：

4、第四步，添加第二个div元素，设置顶部边框样式

.two{

width: 400px;

height: 100px;

color: #000000;

border-width: 3px;

border-top: 1px dashed #7FFFD4;

}

如下图所示：

5、第五步，添加第三个div样式，设置左边框样式，

.three{

width: 400px;

height: 100px;

color: #ED9898;

border-width: 4px;

border-left: 1px dotted #8A2BE2;

}

如下图所示：

6、第六步，设置最后一个div元素，设计右边框样式、颜色和宽度，

.four{

width: 400px;

height: 100px;

color: #DEB887;

border-width: 5px;

border-right: 1px double darkcyan;

}

如下图所示：