Kursus IT Dasar CSS 024_Border, Outline, Bayangan

Border

Border (Borders) dalam CSS adalah properti gaya penting yang digunakan untuk membuat batas visual di sekitar elemen.

Properti Border

• border-width: Mengatur lebar border.
• border-style: Mengatur gaya border (solid: garis padat, dotted: garis titik-titik, dashed: garis putus-putus, double: garis ganda, groove: alur, ridge: tonjolan, inset: cekung, outset: cembung, none: tanpa border).
• border-color: Mengatur warna border.

Contoh:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Properti singkatan */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efek:

Arah Border

border-top, border-right, border-bottom, border-left: Masing-masing mengatur border atas, kanan, bawah, dan kiri.

Contoh:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Efek:

Sudut Bulat

border-radius: Mengatur sudut bulat border.

Contoh:

1
    .example1 {
2
        border-radius: 10px;
3
        /* Semua sudut memiliki radius 10px */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efek:

Bayangan

Bayangan (box-shadow) dalam CSS adalah properti yang membuat efek bayangan di sekitar elemen. Bayangan dapat digunakan untuk meningkatkan kesan tiga dimensi elemen, membuat halaman terlihat lebih hidup. Dengan menambahkan kata kunci inset sebelum nilai box-shadow, bayangan internal dapat dibuat. Beberapa efek bayangan dapat ditambahkan dengan memisahkan beberapa nilai box-shadow dengan koma. Jika elemen memiliki sudut bulat, bayangan akan diterapkan sesuai pada sudut bulat tersebut.

Bayangan dapat memiliki beberapa parameter, termasuk offset horizontal, offset vertikal, radius blur, warna bayangan, dll.

• Offset horizontal (horizontal offset): Offset horizontal bayangan.
• Offset vertikal (vertical offset): Offset vertikal bayangan.
• Radius blur (blur radius): Tingkat keburaman bayangan.
• Radius penyebaran (spread radius): Ukuran bayangan, nilai positif memperbesar, nilai negatif memperkecil.
• Warna bayangan: Warna bayangan.

Contoh:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Efek:

Outline

Outline dalam CSS adalah border yang terlihat yang dapat ditambahkan di sekitar elemen, biasanya digunakan untuk menyoroti tepi luar elemen. Outline tidak memengaruhi tata letak dan tidak mengubah ukuran atau posisi elemen. Outline biasanya digunakan untuk visualisasi fokus elemen formulir, status aktif tautan, dll.

• outline-color: Mengatur warna outline.
• outline-style: Mengatur gaya outline.
• outline-width: Mengatur lebar outline.
• outline-offset: Mengatur offset outline, jarak antara outline dan border.

Contoh:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efek: