Belajar Koding HTML & CSS Bagian 10: Membuat Ukuran Borders Color
.png)
Borders color adalah properti CSS yang mengatur warna batas atau border suatu elemen HTML. Properti ini dapat digunakan untuk mengatur warna keempat batas elemen, yaitu atas, kanan, bawah, dan kiri.
Untuk mengatur warna garis tepi
(border) pada elemen HTML menggunakan CSS, Anda dapat menggunakan properti border-color.
Properti ini memungkinkan Anda menentukan warna untuk semua sisi border
sekaligus atau secara spesifik per sisi.
1. Menentukan Warna Border untuk
Semua Sisi
Anda dapat menetapkan warna border
yang sama untuk semua sisi dengan satu nilai:
.kotak {
border-style: solid;
border-width: 2px;
border-color: red;
}
Dalam contoh di atas, semua sisi
border akan berwarna merah.
2. Menentukan Warna Border untuk
Setiap Sisi
Anda juga dapat menetapkan warna
yang berbeda untuk setiap sisi dengan memberikan empat nilai:
.kotak {
border-style: solid;
border-width: 2px;
border-color: red
green blue yellow; /* atas, kanan, bawah, kiri */
}
Urutan nilai mengikuti arah jarum
jam: atas, kanan, bawah, kiri.
3. Menggunakan Nilai Warna yang
Berbeda
CSS mendukung berbagai format warna:
- Nama
warna: red, blue, green, dll.
- Kode
heksadesimal: #ff0000, #00ff00, dll.
- RGB:
rgb(255, 0, 0), rgb(0, 255, 0), dll.
- HSL:
hsl(0, 100%, 50%), hsl(120, 100%, 50%), dll.
- Nilai
transparan: transparent
Contoh:
.kotak {
border-style: solid;
border-width: 2px;
border-color: #ff0000;
/* merah dalam format heksadesimal */
}
4. Menentukan Warna Border untuk
Sisi Tertentu
Anda dapat menetapkan warna border
secara spesifik untuk satu sisi menggunakan properti berikut:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
Contoh:
.kotak {
border-style: solid;
border-width: 2px;
border-top-color:
red;
border-right-color:
green;
border-bottom-color:
blue;
border-left-color:
yellow;
}
5. Contoh Lengkap HTML dan CSS
Berikut adalah contoh lengkap
penggunaan border-color dalam HTML dan CSS:
html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Border Color</title>
<style>
.kotak1 {
border: 2px solid red;
padding: 10px;
margin: 10px;
}
.kotak2 {
border-style:
solid;
border-width: 2px;
border-color:
red green blue yellow; /* atas, kanan, bawah, kiri */
padding: 10px;
margin: 10px;
}
.kotak3 {
border-style:
solid;
border-width: 2px;
border-top-color:
red;
border-right-color:
green;
border-bottom-color:
blue;
border-left-color:
yellow;
padding: 10px;
margin: 10px;
}
.kotak4 {
border-style:
solid;
border-width: 2px;
border-color: rgb(255,
0, 0); /* merah dalam format RGB */
padding: 10px;
margin: 10px;
}
.kotak5 {
border-style:
solid;
border-width: 2px;
border-color: hsl(120,
100%, 50%); /* hijau dalam format HSL */
padding: 10px;
margin: 10px;
}
.kotak6 {
border-style:
solid;
border-width: 2px;
border-color:
transparent; /* border transparan */
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="kotak1">Border
warna merah (satu nilai)</div>
<div class="kotak2">Border
dengan warna berbeda per sisi (empat nilai)</div>
<div class="kotak3">Border
dengan warna berbeda per sisi (per sisi)</div>
<div class="kotak4">Border
warna merah dalam format RGB</div>
<div class="kotak5">Border
warna hijau dalam format HSL</div>
<div class="kotak6">Border
transparan</div>
</body>
</html>
Tampilan Hasil (Output) Boders width
0 Response to "Belajar Koding HTML & CSS Bagian 10: Membuat Ukuran Borders Color"
Post a Comment