css：border的写法（圆角）

一、在style中，元素的边框有三个常用属性，中间用空格隔开：

border: width(边框粗细)  style(边框样式)  color(边框颜色)；

举例：border：20px  solid  red;

就是 20px的--实心的--红色的边框。

二、border的第二个值控制边框的样式，style有三个可选值。我们可以通过改变它来实现一条实线、虚线、或者点线。

style的关键词：solid————实线边框；

                          dashed ---------虚线边框；

                          dotted  ``````````点线边框；

三、border的第三个值控制边框的颜色，可以写颜色对应的英文单词，也可以用

十六进制代码控制。

（1）关键字：英文单词eg: red blue yellow green……

（2）十六进制写法：#fffff为白色，还有很多颜色，可以打开ps，从调色盘上选择需要的颜色，然后直接把颜色复制下来。

不懂得朋友看图：

复制选中部分，粘贴在你的border ：10px solid #e45872;

四、边框方向

边框是四个方向，可以通过left，right,top,bottom进行控制

如：border-top:10px solid red;上边框

border-left:10px solid red;左边框——以此类推

五、边框可选择

我们也可以只设置左边框或者其他某个方向的边框。只要单独设置所需要的方向的边框的值即可。

六、圆角

实现圆角很简单，只需要设置border-radius属性。

border-radius的值越大，角越圆。

上代码

div{
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: green;
}

效果：

 

border-radius可以设置四个方向，分别为：左上，右上，右下，左下。

上代码
div{
    width: 100px;
    height: 100px;
    border-radius: 10px 20px 30px 40px;
    background: green;
}

效果：

好啦，自己敲代码试试看吧~