Belajar Koding HTML & CSS Bagian 12: Membuat Ukuran Borders Shorthand
.png)
Border shorthand
adalah metode dalam CSS untuk mendefinisikan border
elemen. Dengan menggunakan shorthand
ini, kamu dapat menentukan lebar, style,
dan warna border dalam satu baris kode, daripada menulisnya secara terpisah.
Contohnya, border: 5px solid black; akan membuat border lebar 5 pixel dengan border style solid berwarna hitam.
Untuk mengatur ukuran border
menggunakan properti shorthand border dalam CSS, Anda dapat menentukan
lebar (border-width), gaya (border-style),
dan warna (border-color) dalam satu deklarasi. Ini
memudahkan penulisan kode dan meningkatkan keterbacaan.
Sintaks Shorthand border
selector {
border: [lebar]
[gaya] [warna];
}
- lebar: Ukuran ketebalan border, seperti
1px, medium, thick, dll.
- gaya: Jenis garis border, seperti solid, dashed, dotted, dll.
- warna: Warna border, dapat berupa
nama warna (red), kode heksadesimal (#ff0000), rgb(), atau hsl().
Catatan: Nilai border-style
wajib ditentukan agar border terlihat.
🧪 Contoh Penggunaan
.kotak1 {
border: 2px solid
red;
}
.kotak2 {
border: 4px dashed #00ff00;
}
.kotak3 {
border: thick double
rgb(0, 0, 255);
}
.kotak4 {
border: 1rem groove hsl(60,
100%, 50%);
}
Dalam contoh-contoh di atas, setiap
kelas .kotak memiliki border dengan kombinasi lebar, gaya, dan warna
yang berbeda.
Penggunaan Shorthand untuk Sisi
Tertentu
Anda juga dapat menerapkan shorthand
border pada sisi tertentu dengan menggunakan properti seperti border-top,
border-right, border-bottom, dan border-left:
.kotak {
border-top: 3px
solid blue;
border-right: 5px
dashed green;
border-bottom: 2px
dotted red;
border-left: 4px double
orange;
}
Ini memungkinkan Anda mengatur
border yang berbeda untuk setiap sisi elemen.TutorialsPoint
💡 Tips Tambahan
- Urutan
nilai: Meskipun
urutan nilai dalam shorthand border tidak wajib, disarankan
mengikuti urutan [lebar]
[gaya] [warna]
untuk konsistensi dan keterbacaan.
- Nilai
default:
- border-width: medium
- border-style: none (tanpa border)
- border-color: currentcolor (warna teks saat ini)MDN Web Docs
Jika Anda tidak menentukan border-style,
border tidak akan ditampilkan. MDN Web Docs
Contoh Lengkap HTML & CSS
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Border Shorthand</title>
<style>
.kotak1 {
border: 2px
solid red;
padding: 10px;
margin: 10px;
}
.kotak2 {
border: 4px
dashed #00ff00;
padding: 10px;
margin: 10px;
}
.kotak3 {
border: thick
double rgb(0, 0, 255);
padding: 10px;
margin: 10px;
}
.kotak4 {
border: 1rem
groove hsl(60, 100%, 50%);
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="kotak1">Kotak
1: 2px solid merah</div>
<div class="kotak2">Kotak
2: 4px dashed hijau (#00ff00)</div>
<div class="kotak3">Kotak
3: thick double biru (rgb)</div>
<div class="kotak4">Kotak
4: 1rem groove kuning (hsl)</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Boders Shorthand |
0 Response to "Belajar Koding HTML & CSS Bagian 12: Membuat Ukuran Borders Shorthand"
Post a Comment