用css样式设置元素的轮廓，其实就是为元素添加边框的意思
创新互联从2013年创立，先为明水等服务建站，明水等地企业，进行企业商务咨询服务。为明水企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
CSS样式代码当中，表示边框的代码是border，它是一个复合属性，包含边框的粗细、颜色、线型（实线、虚线、点线等），具体你可以查看这个样例：
style
.h5course {
border: 1px solid red;
}
/style
div class="h5course"使用CSS样式实现元素的轮廓（边框）添加/div
代码含义为，为类名为h5course的元素，增加1像素红色边框
如果对选择器、边框（隶属于盒模型知识）不是太了解的话，建议选本书系统的学一学，如：《HTML5布局之路》《Head Frst HTML》等都是不错的选择
很简单css边框样式单词是border,使用border即可让div或span或h1、p等对象实现需要边框样式。
我们给一个div类css 命名为“divcss5”，盒子加一个1px红色边框，为了观察效果，同时对这个div盒子设置css width和css height样式。
对table设置css样式边框，分为几种情况：
1、只对table设置边框
2、对td设置边框
3、对table和td技巧性设置表格边框
4、对table和td设置背景，实现完美表格边框
以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示。为了便于观察，divcss5均设置所有案例表格为1px实线红色边框为例；table宽度为400px;表格为三列三行，对以上四种情况表格外层加个div盒子，分别CSS命名为“.table-a”、“.table-b”、“.table-c”、“.table-d”。
一、只对表格table标签设置边框 - TOP
只对table标签设置border（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。
案例详细如下：
1、对应css代码
style .table-a table{border:1px solid #F00} /* css注释：只对table标签设置红色边框样式 */ /style
2、对应html代码片段
div class="table-a" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"网址/td td width="112"说明/td /tr tr tdDIVCSS5/td td;/td tdCSS学习/td /tr tr tdCSS5/td td;/td tdCSS切图/td /tr /table /div
二、对td设置边框 - TOP
对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。
详细案例教程如下：
1、对应css代码
style .table-b table td{border:1px solid #F00} /* css注释：只对table td标签设置红色边框样式 */ /style
2、对应html源代码片段
div class="table-b" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"网址/td td width="112"说明/td /tr tr tdDIVCSS5/td td;/td tdCSS学习/td /tr tr tdCSS5/td td;/td tdCSS切图/td /tr /table
三、对table和td技巧性设置表格边框 - TOP
如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。
解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。
解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。
1、对应css代码：
style .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} /* css 注释： 只对table td设置左与上边框； 对table设置右与下边框； 为了便于截图，我们将css 注释说明换行排版 */ /style
2、对应html源代码片段：
div class="table-c" table width="400" border="0" cellspacing="0" cellpadding="0" tr td width="105"站名/td td width="181"网址/td td width="112"说明/td /tr tr tdDIVCSS5/td td;/td tdCSS学习/td /tr tr tdCSS5/td td;/td tdCSS切图/td /tr /table
指定的table为细边框，把table放在div中即可。
一、首先新建表格，代码如下：
table width="500" border="1" trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td /trtr tdnbsp;/td tdnbsp;/tdtdnbsp;/td/tr/table。
二、在table里加css样式，代码如下：
table width="500" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" tr tdnbsp;/tdtdnbsp;/td tdnbsp;/td /tr tr tdnbsp;/tdtdnbsp;/tdtdnbsp;/td/tr trtdnbsp;/tdtdnbsp;/tdtdnbsp;/td/table。
三、单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间。单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离，border-collapse:collapse表示表格的两边框合并为一条即可。
border-top:1px solid #cccccc;
是border-top 设置上边框样式，1px 是设置边框的大小，solid是样式，#cccccc是边框颜色。
表格的边框分为3个元素决定：table,th,td;
如果三种元素全部设置了border样式，那么会发现外层有2层border,里面的th与th，td与td,td与th之间的border也是有2层的，所以，在设置border之前最好先想好通过什么样的规则来展现boeder(因为方式很多，那么我们只能选择适合自己的-也就是用的习惯的)。另外，表格之间还有一个概念是表空间,可以通过给表格设置样式table{ border-collapse:collapse; border-spacing:0;}清除这些多余的空间，那么有了上面的准备工作之后，下面就开始border样式的设置--代码如下：
td,th{
border-bottom: 1px solid #e3e3e3;//xia下边框
border-right:1px solid #e3e3e3;//有边框
}
那么你可以得到效果：
少了左边和上边，接下来就可以根据浏览器的兼容性选择分支：
直接table{
border-top: 1px solid #e3e3e3;
border-left: 1px solid #e3e3e3;
}
简单粗暴
2.
td:first-child,th:first-child{
border-left: 1px solid #e3e3e3;
}
th{
border-top: 1px solid #e3e3e3;}
这个方法有兼容性问题，因为涉及到伪类的:first-child，所以IE7是无效的。
于是效果就如下了：
