如果想要把元素边界变得圆润，不妨试试这个。

通过 CSS3，您能够创建圆角边框并且不需使用设计软件，比如 PhotoShop。

通过给 html 元素的样式一条 border-radius ，让这个元素的边角由直角边变成圆弧。

它的遵循 css 通用的：左上、 右上 、右下 、左下 的原则。

border-radius:value;

包含参数

border-radius:value;

value 代表给这个元素 4 个方向的圆弧值。

border-radius:value1 value2;

value1 代表 左上、右下，value2 代表 右上、左下角圆弧值。

border-radius:value1 value2 value3;

value1 代表左上 value2 代表 右上 左下 value3 代表右下
4. 有四个参数时，中间用空格分开

border-radius:value1 value2 value3 value3;

value1 ~ value4 分别代表左上、 右上 、右下 、左下四个角的圆弧值

<div class="demo"></div>

可以这样

.demo{   
    border-radius:  px  px;  
}

推荐第一种写法，但是也可以这样

.demo{   
    border-top-right-radius:px;  
    border-bottom-left-radius:px;
}

图

<div class="card">
    <div class="text">
        demo1
    </div>
</div>

.card{
    background: red;
    width: px;
    height: px;
    line-height: px;    
    text-align: center;
    border-radius: px;
}
.text{
    display: inline-block;
    width: px;
    height: px;
    line-height: px;
    background: #fff;
    border-radius: ;
}

图

<table>
    <tr>
        <td>姓名</td><td>年龄</td>
    </tr>
    <tr>
        <td>demo</td><td>19</td>
    </tr>
</table>

table{   
    background: red;
    border-radius: px px  ;      
    font-size: px;
    color: #fff;
    border-collapse: collapse;
    overflow: hidden;
}

.demo{
    width:px;
    height:px;
    border-radius：
}

设置 50% 的好处就是不用再去计算他的宽高，例如上面这个例子 border-radius:50px同样可以让这个元素变成圆。
2. 如果圆角过大，记得要设定 padding ，这样可以避免里面的超出元素。