Belajar Koding HTML & CSS Bagian 9: Membuat Ukuran Borders Width
CSS border-width adalah properti CSS yang mengatur ketebalan batas (border) suatu elemen. Ketebalan ini bisa sama untuk semua sisi atau berbeda-beda untuk setiap sisinya.
Cara
menggunakan CSS border-width
- Menentukan
ketebalan dengan satuan ukuran tertentu, seperti px, pt, cm, atau em
- Menggunakan
salah satu dari tiga nilai, yaitu thin, medium, atau thick
- Memberikan
satu nilai untuk memberikan ketebalan yang sama pada semua sisi border
- Memberikan nilai berbeda untuk setiap sisi border
1. Menentukan Border Width Secara
Umum
Untuk menetapkan ketebalan border
yang sama pada keempat sisi elemen, Anda dapat menggunakan satu nilai:
.kotak {
border-style: solid;
border-width: 4px;
}
Dalam contoh di atas, semua sisi
border akan memiliki ketebalan 4 piksel.
2. Menentukan Border Width Per Sisi
Jika Anda ingin mengatur ketebalan
border secara spesifik untuk setiap sisi (atas, kanan, bawah, kiri), Anda dapat
menggunakan hingga empat nilai:
.kotak {
border-style: solid;
border-width: 5px 10px
15px 20px; /* atas kanan bawah kiri */
}
Penjelasan urutan nilai:
- Satu
nilai: semua sisi
- Dua
nilai: atas & bawah, kanan & kiri
- Tiga
nilai: atas, kanan & kiri, bawah
- Empat
nilai: atas, kanan, bawah, kiri
Berikut adalah contoh lengkap kode
HTML dan CSS untuk mengatur ukuran border (border-width) pada elemen. Kode ini mencakup
berbagai variasi penggunaan border-width, baik dengan satu nilai, beberapa
nilai, maupun pengaturan per sisi:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Border Width</title>
<style>
.kotak1 {
border-style:
solid;
border-width: 3px;
border-color:
red;
padding: 10px;
margin: 10px;
}
.kotak2 {
border-style:
solid;
border-width: 2px
4px;
border-color:
green;
padding: 10px;
margin: 10px;
}
.kotak3 {
border-style:
solid;
border-width: 2px
4px 6px;
border-color:
blue;
padding: 10px;
margin: 10px;
}
.kotak4 {
border-style:
solid;
border-width: 2px
4px 6px 8px;
border-color:
orange;
padding: 10px;
margin: 10px;
}
.kotak5 {
border-style: solid;
border-width:
thin;
border-color:
purple;
padding: 10px;
margin: 10px;
}
.kotak6 {
border-style:
solid;
border-top-width:
5px;
border-right-width:
10px;
border-bottom-width:
15px;
border-left-width:
20px;
border-color:
brown;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="kotak1">Border
width: 3px (semua sisi)</div>
<div class="kotak2">Border
width: 2px atas & bawah, 4px kanan & kiri</div>
<div class="kotak3">Border
width: 2px atas, 4px kanan & kiri, 6px bawah</div>
<div class="kotak4">Border
width: 2px atas, 4px kanan, 6px bawah, 8px kiri</div>
<div class="kotak5">Border
width: thin (nilai kata kunci)</div>
<div class="kotak6">Border
width: per sisi (5px atas, 10px kanan, 15px bawah, 20px kiri)</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Boders width |
Penjelasan:
- .kotak1: Mengatur border-width dengan satu nilai (3px) untuk semua sisi.
- .kotak2: Menggunakan dua nilai (2px 4px), yang berarti 2px untuk atas & bawah, dan 4px untuk kanan & kiri.
- .kotak3: Tiga nilai (2px 4px 6px) berarti 2px atas, 4px kanan & kiri, dan 6px bawah.
- .kotak4: Empat nilai (2px 4px 6px 8px) untuk atas, kanan, bawah, dan
kiri secara berurutan.
- .kotak5: Menggunakan nilai kata kunci thin untuk ketebalan border.
- .kotak6: Mengatur border-width secara spesifik untuk setiap
sisi menggunakan properti border-top-width, border-right-width, border-bottom-width, dan border-left-width.
Catatan:
- Pastikan
untuk selalu menetapkan border-style (misalnya, solid, dashed, dotted, dll.) agar border-width dapat terlihat. Tanpa border-style, border tidak akan
ditampilkan.
- Anda
dapat menggunakan satuan lain seperti em, rem, atau % sesuai kebutuhan.
- Nilai
kata kunci seperti thin, medium, dan thick memiliki ketebalan yang
ditentukan oleh browser dan dapat berbeda antar browser .
0 Response to "Belajar Koding HTML & CSS Bagian 9: Membuat Ukuran Borders Width"
Post a Comment