# border - 讓你的標籤添加線條

- border: 可以讓你的標籤(tags)、還有 img 可以自由的控制線條來包住他們

範例:

    // h1
    <h1>hello world</h1>

    // capoo picture
    <img src="https://pbs.twimg.com/profile_images/1333846729435869191/yXRPYw1P_400x400.jpg" alt="">

    // 自定義類別
    <div class="container">
        123
    </div>

    // p 段落
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam nisi, nobis sit, minima nostrum amet quas sunt
        sequi praesentium quia delectus aut ducimus laborum magni eos provident velit voluptate enim?
    </p>

- CSS:

h1 {
    padding: 10px;
    border: 3px solid green;
}


.container {
    padding: 20px;
    border-left: 5px solid blue;
    border-right: 5px solid black;
}


img {
    border: 10px solid blue;
}


p {
    /* 常見設定方式: */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    line-height: 1.9;
    text-align: left;
    text-indent: 32px;
    text-decoration: none;
    letter-spacing: 2px;
}

## 正常的寫法:

.class {
    // 設定粗度、線條樣式、顏色
    border: 1px solid black;
}

- 也可以單獨在某些方向去寫，但就是要額外自己去分開方向性..

例如你不用包住整個 tags，你只想要下左邊或是下面:

.class {
    border-left: 1px solid black;
    border-bottom: 依此類推
}

---

###### tags: `HTML、CSS`