Đường viền

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 36 trên 76.

Trong CSS, đường viền là đường bao quanh một phần tử, ngăn cách phần tử đó với các phần tử khác và xác định ranh giới của nó.

Đây là cú pháp cơ bản để sử dụng thuộc tính border:

selector {
    border-width: value;
    border-style: value;
    border-color: value;
}

border-width: Độ dày của đường viền, có thể được chỉ định bằng pixel (px), đơn vị em (em) hoặc các đơn vị CSS hợp lệ khác. Bạn cũng có thể dùng các từ khóa như thin, medium và thick.

border-style: Kiểu đường viền, có thể là một trong các kiểu sau:
- dotted: Một dãy dấu chấm
- dashed: Một dãy nét đứt
- solid: Một đường liền
- double: Hai đường liền

border-color: Màu của đường viền, có thể được chỉ định bằng tên màu, giá trị thập lục phân, giá trị RGB hoặc giá trị HSL.

Bạn cũng có thể dùng cú pháp viết tắt để đặt cả ba thuộc tính đường viền cùng lúc:

selector {
    border: width style color;
}

Ví dụ:

p {
    border: 2px solid blue;
}

Trong ví dụ này, tất cả phần tử <p> (đoạn văn) đều có đường viền màu xanh dương liền nét, rộng 2px.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có ba phần tử <div>, mỗi phần tử đại diện cho lịch chiếu phim vào thứ Sáu, thứ Bảy và Chủ nhật. Nhiệm vụ của bạn là dùng thuộc tính border để tạo kiểu cho chúng.

Tạo kiểu cho lịch chiếu thứ Sáu bằng đường viền 3px solid black.
Tạo kiểu cho lịch chiếu thứ Bảy bằng đường viền 4px dashed blue.
Tạo kiểu cho lịch chiếu Chủ nhật bằng đường viền 5px dotted green.

Tự làm thử

<html>
<head>
    <title>Borders</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="friday">
        <h3>Friday</h3>
        <p>7:00 PM - The Inception</p>
    </div>
    <div class="saturday">
        <h3>Saturday</h3>
        <p>8:00 PM - The Matrix</p>
    </div>
    <div class="sunday">
        <h3>Sunday</h3>
        <p>9:00 PM - Interstellar</p>
    </div>
</body>
</html>