Border

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 36 dari 76.

Dalam CSS, border adalah garis yang mengelilingi elemen, memisahkannya dari elemen lain dan menentukan batas-batasnya.

Berikut sintaks dasar untuk menggunakan property border:

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

border-width: Ketebalan border, yang dapat ditentukan dalam piksel (px), em (em), atau satuan CSS valid lainnya. Kamu juga dapat menggunakan kata kunci seperti thin, medium, dan thick.

border-style: Gaya border, yang dapat berupa salah satu dari berikut:
- dotted: Serangkaian titik
- dashed: Serangkaian garis putus-putus
- solid: Garis utuh
- double: Dua garis utuh

border-color: Warna garis tepi, yang dapat ditentukan menggunakan nama warna, nilai heksadesimal, nilai RGB, atau nilai HSL.

Kamu juga bisa menggunakan notasi singkat untuk mengatur ketiga property border sekaligus:

selector {
    border: width style color;
}

Contohnya:

p {
    border: 2px solid blue;
}

Dalam contoh ini, semua elemen <p> (paragraf) memiliki garis tepi biru utuh dengan lebar 2px.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan tiga elemen <div>, yang masing-masing mewakili jadwal bioskop untuk hari Jumat, Sabtu, dan Minggu. Tugasmu adalah menggunakan property border untuk menatanya.

Tata jadwal hari Jumat dengan border 3px solid black.
Tata jadwal hari Sabtu dengan border 4px dashed blue.
Tata jadwal hari Minggu dengan border 5px dotted green.

Coba sendiri

<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>