Belajar Koding HTML & CSS Bagian 11: Membuat Ukuran Borders Sides
.png)
Border sides
adalah bagian-bagian dari garis batas luar (border) yang dapat diatur
lebar, gaya, dan warnanya. Border sides dapat diterapkan pada elemen HTML,
seperti gambar atau kotak teks.
Penjelasan
- Border
adalah garis batas luar dari sebuah elemen HTML.
- Border
sides dapat diatur lebar, gaya, dan warnanya.
- Border
merupakan bagian dari box model, sehingga garis yang dibuat dengan border
akan berada di dalam ukuran elemen.
- Border
sering digunakan untuk keperluan desain, seperti memberikan bingkai pada
gambar atau kotak teks.
- Properti
border adalah sintaksis singkat dalam CSS yang menerima beberapa nilai
untuk menggambar garis di sekitar elemen yang diterapkannya.
- Property
border dapat menerima 3 buah nilai berurutan dari border-width,
border-style dan border-color.
- Properti
border-bottom memungkinkan Anda untuk mengontrol lebar, gaya, dan warna
batas bawah kotak.
Untuk
mengatur ukuran border pada setiap sisi elemen HTML menggunakan CSS, Anda
memiliki dua pendekatan utama:
1. Menggunakan Properti Individual untuk Setiap Sisi
CSS
menyediakan properti khusus untuk mengatur lebar border pada masing-masing sisi
elemen:
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
Contoh:
.kotak {
border-top-width: 4px;
border-right-width: 2px;
border-bottom-width:
6px;
border-left-width: 1px;
border-style: solid;
border-color: blue;
}
Dalam contoh
di atas, setiap sisi border memiliki lebar yang berbeda.
2. Menggunakan Properti Shorthand border-width
Anda juga
dapat menggunakan properti border-width dengan satu hingga empat nilai
untuk mengatur lebar border:
- Satu nilai: semua sisi
- Dua nilai: atas & bawah,
kanan & kiri
- Tiga nilai: atas, kanan &
kiri, bawah
- Empat nilai: atas, kanan,
bawah, kiri
Contoh:
.kotak {
border-width: 4px 2px
6px 1px;
border-style: solid;
border-color: blue;
}
Dalam contoh
ini, urutan nilai mengikuti arah jarum jam: atas, kanan, bawah, kiri.
Contoh Lengkap HTML dan CSS
Berikut
adalah contoh lengkap penggunaan kedua metode di atas:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Border Sides</title>
<style>
.kotak1 {
border-top-width:
4px;
border-right-width:
2px;
border-bottom-width:
6px;
border-left-width:
1px;
border-style:
solid;
border-color:
blue;
padding: 10px;
margin: 10px;
}
.kotak2 {
border-width: 4px
2px 6px 1px;
border-style:
solid;
border-color:
green;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="kotak1">Border
dengan properti individual per sisi</div>
<div class="kotak2">Border
dengan shorthand border-width</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Boders Sides |
Dalam contoh
di atas:
- kotak1 menggunakan properti
individual untuk setiap sisi.
- kotak2 menggunakan properti shorthand
border-width dengan empat nilai.
0 Response to "Belajar Koding HTML & CSS Bagian 11: Membuat Ukuran Borders Sides"
Post a Comment