Belajar Koding HTML & CSS Bagian 13: Membuat Ukuran Borders Border
.png)
Untuk membuat border (garis tepi)
pada elemen HTML menggunakan CSS, Anda dapat menggunakan properti border.
Properti ini memungkinkan Anda mengatur lebar, gaya, dan warna border sesuai
kebutuhan.
1. Menggunakan Properti border (Shorthand)
Properti border
adalah cara singkat untuk menetapkan lebar, gaya, dan warna border sekaligus.
Format umum:
selector {
border: [lebar]
[gaya] [warna];
}
Contoh:
p {
border: 2px solid
blue;
}
Kode di atas akan memberikan border
berwarna biru dengan ketebalan 2 piksel dan gaya solid pada elemen paragraf.
2. Menetapkan Sisi Border Secara
Terpisah
Jika Anda ingin mengatur border
hanya pada sisi tertentu, gunakan properti seperti border-top,
border-right, border-bottom, atau border-left.
Contoh:
div {
border-top: 3px
dashed red;
border-left: 5px
solid green;
}
3. Gaya Border yang Tersedia
CSS menyediakan berbagai gaya border
yang dapat Anda gunakan:
- solid – garis penuh
- dashed – garis putus-putus
- dotted – titik-titik
- double – garis ganda
- groove, ridge, inset, outset – efek 3D
Contoh:
img {
border: 4px dotted
orange;
}
4. Menambahkan Radius pada Border
(Sudut Membulat)
Untuk membuat sudut border menjadi
membulat, gunakan properti border-radius. Contoh:
.box {
border: 2px solid
black;
border-radius: 10px;
}
5. Menetapkan Border dengan Gambar
Anda juga dapat menggunakan gambar
sebagai border dengan properti border-image. Contoh:
div {
border: 10px solid
transparent;
border-image:
url(border.png) 30 round;
}
Berikut adalah contoh lengkap kode
HTML dan CSS untuk membuat border (garis tepi) pada elemen dengan berbagai
variasi:
1. Struktur HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta
charset="UTF-8">
<title>Contoh
Border dengan CSS</title>
<link
rel="stylesheet" href="style.css">
</head>
<body>
<h1
class="judul">Judul dengan Border</h1>
<p
class="paragraf">Ini paragraf dengan border solid biru.</p>
<div
class="kotak">Kotak dengan border dashed merah dan sudut
membulat.</div>
<div
class="kotak-gambar">Kotak dengan border gambar.</div>
</body>
</html>
2. CSS (style.css)
/* Border solid */
.judul {
border: 3px solid
green;
padding: 10px;
text-align: center;
}
/* Border dotted */
.paragraf {
border: 2px dotted
blue;
padding: 10px;
margin: 10px 0;
}
/* Border dashed dengan border-radius */
.kotak {
border: 4px dashed
red;
border-radius: 10px;
padding: 15px;
width: 300px;
}
/* Border dengan gambar */
.kotak-gambar {
border: 10px solid
transparent;
border-image: url('border.png')
30 round;
padding: 20px;
width: 300px;
height: 100px;
}
3. Penjelasan
- .judul: Menambahkan border solid
berwarna hijau pada elemen heading.
- .paragraf: Menambahkan border dotted
berwarna biru pada paragraf.
- .kotak: Menambahkan border dashed
berwarna merah dengan sudut membulat menggunakan border-radius.
- .kotak-gambar: Menggunakan gambar sebagai
border dengan properti border-image. Pastikan file border.png tersedia di direktori yang
sama.
4. Variasi Gaya Border
CSS menyediakan berbagai gaya border yang dapat digunakan:
- solid: Garis penuh
- dashed: Garis putus-putus
- dotted: Garis titik-titik
- double: Garis ganda
- groove, ridge, inset, outset: Efek 3D
Contoh penggunaan:
.paragraf {
border: 2px dotted
blue;
}
5. Tips Tambahan
- Mengatur
sisi border secara terpisah: Gunakan border-top, border-right, border-bottom, dan border-left untuk mengatur border pada
sisi tertentu.
- Mengatur
ketebalan border:
Gunakan border-width untuk menentukan ketebalan
border.
- Mengatur
warna border:
Gunakan border-color untuk menentukan warna
border.
0 Response to "Belajar Koding HTML & CSS Bagian 13: Membuat Ukuran Borders Border"
Post a Comment