一.边框的形状

设置边框的四个边不同颜色，同时加粗边框

div{
    width: 300px;
    height: 300px;
    border:50px solid red;
    border-color: black blue green pink;
}

梯形边框

div{
    width: 0px;
    height: 0px;
    border:50px solid red;
    border-color: black blue green pink;
}

边框2.png

二.利用边框特性画三角形

只需要让其他三个角的颜色和背景色相同，留下一个三角即可

div{
    width: 0px;
    height: 0px;
    border:50px solid red;
    border-color: white white red white;
}

边框3.png

三.利用边框特性画圆

border-radious 给div元素添加圆角的边框

div{
    width: 100px;
    height: 100px;
    border:1px solid red;
    border-radius: 10px;
}

边框4.png

当border-radius的值大于等于width和heigh(width=height)值的一半时，就成为一个圆

边框5.png