用新的边框我们先要除去旧的边框才可以，然后再给他加上新边框，如下：
一，先除去：
1，看下默认样式效果，如图可以看到，默认padding和border，字体大小也是受浏览器默认指定
2，去除padding，指定一个字体大小，这里匹配了*表示所有元素，因为大部分的默认margin和padding都需要先去除，统一去除，后面需要再单独有针对性的添加
*{
margin: 0
padding: 0
font-size: 100%
}
3，默认padding去除之后，按钮之间有间隙，这是inline-block默认的间距，用float来去除，并指定合适的宽和高
button{
float: left
width: 60px
height: 60px
}
4，间距去掉了，但都显示成一行了，这个是因为添加的浮动影响的，可以在div元素后面去除浮动
div:after{
content: ""
display: block
clear: both
}
5，此时，可以看到边框重叠导致边框宽度不一致，需要自定义边框
border: 1px solid black
margin-right: -1px
margin-bottom: -1px
6，从上面的图中，可以看到，在鼠标点击按钮的时候，会有蓝框选择的样式
加上outline: none来去除
二，再加上是使用如下的编程方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
div{
width:200pxheight:100pxborder-bottom:1px solid #CCC}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
导致会出现边框的原因是CSS的默认设置，所以只要把这个默认设置改掉就可以了。然后就可以加上你想要的边框了哦！
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的<style>标签中，输入css代码：td {padding: 0}。
3、浏览器运行index.html页面，此时成功用css去除了表格的边框和边距。
单选框和复选框通常是默认有样式，不能随意控制。
单选框和复选框通常改变样式的方法有两种：
使用<label>标签包含着单选（或复选）和一个单选样式的小图片，使用定位方法，让图片定位到单选框之上，点击图片的时候，使用javascript切换图片，达到选中和不选中效果，也就是两个图片的切换，<label>会让真正藏在下面的复选框选中和不选中。这种方法能解决大部分复选框或者单选框的样式问题。
使用非单选框复选框的标签，也就是用其它标签定义样式，使用javascript模拟点击的时候标签的样式切换，不过这种方法需要为表单提交的时候提供参数。
使用样式修改，比如border或者透明度等等，但是能修改的样式有限，例如单选框和复选框的大小无法修改，所以这种方法局限性最大，通常效果不太理想。
