边框和圆角

 <style>
    section{
        width: 300px;
        height: 300px;
        margin: 100px auto;
        /*border：设置边框，后面的值可以调换顺序，但是推荐使用 width style color的顺序
        width：边框线宽
        style：边框线样式
        color：边框线颜色
        */
        border: 10px solid red;

        /*设置为没有边框线*/
        /*border: none;*/

        /*边框可以单独设置*/
        /*border-width: 20px;
        border-style: solid;
        border-color: red;*/

        /*单独设置某个方向的边框线*/
        /*注意：上top,右right，下bottom，左left的用词*/
        /*实线*/
        border-top: 10px solid red;
        /*双实线*/
        border-right: 10px double blue;
        /*虚线*/
        border-bottom: 10px dashed green;
        /*点*/
        border-left: 10px dotted purple;

        border: 10px solid red;

        /*设置圆角*/
        /*如果只提供一个，将用于全部的于四个角。*/
        /*border-radius: 10px;*/
        /*如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。*/
        /*border-radius: 10px 40px;*/
        /*如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角*/
        /*border-radius: 20px 40px 60px 80px;*/

        /*单独设置某个方向的圆角*/
        /*右上角*/
        /*border-top-right-radius: 20px;*/
        /*右下角*/
        /*border-bottom-right-radius: 40px;*/
        /*左下角*/
        /*border-bottom-left-radius: 60px;*/
        /*左上角*/
        /*border-top-left-radius: 80px;*/
    }
</style>

内容