55.1拓展之边框border-width属性。

效果地址：https://scrimba.com/c/cQpDKkSN

HTML code：

<div class="border1 borders"></div>
<div class="border2 borders"></div>
<div class="border3 borders"></div>
<div class="border4 borders"></div>
<div class="border5 borders"></div>
<div class="border6 borders"></div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: gray;
}
.borders{
    width: 10em;
    height: 10em;
}
.border1{
    /* 上右下左 */
    border-width: 0.1em 0.2em 0.3em 0.4em;
    border-style: solid;
    border-color: red green blue black;
}
.border2{
    border-radius: 50%;
    border-style: solid;
    border-width: 0.1em 0.2em 0.3em 0.4em;
    border-color: red green blue black;
}
.border3{
    border-radius: 50%;
    border-width: 0.1em 0 0 0;
    border-style: solid;
    border-color: white red blue black;
}
.border4{
    border-radius: 50%;
    border-width: 0.1em 0.1em 0 0;
    border-style: solid;
    border-color: white red blue black;
}
.border5{
    border-radius: 50%;
    border-width: 0.1em 0.1em 0.1em 0;
    border-style: solid;
    border-color: white red blue black;
}
.border6{
    border-radius: 50%;
    border-width: 0.1em 0.1em 0.1em 0.1em;
    border-style: solid;
    border-color: white red blue black;
}