Tutorial Belajar Border di HTML
Saturday, May 13, 2017
Add Comment
Kita dapat menampilkan border dari sebuah elemen dengan menggunakan property
border. Border adalah garis batas luar dari sebuah elemen HTML.border: border-width border-style border-color;
Property
border dapat menerima 3 buah nilai berurutan dari border-width, border-style danborder-color. border-width adalah ukuran lebar border, border-style adalah jenis tampilan border dan border-color adalah warna border.<p style="border:1px solid red;">Contoh paragraf dengan border</p>
Contoh kode di atas akan menampilkan elemen paragraf dengan garis border selebar 1 pixel berwarna merah, seperti tampilan di bawah ini:
Contoh paragraf dengan border
Sisi Border
Umumnya setiap elemen HTML memiliki 4 buah sisi, yakni sisi atas, bawah, kiri dan kanan. Ketika kita membuat style border pada elemen, akan muncul garis border di keempat sisi elemen membentuk kotak.
Kita dapat menampilkan hanya sisi tertentu saja dari border, dengan menggunakan property
border-top untuk border atas,border-right untuk border kanan, border-bottom untuk border bawah dan border-leftuntuk border kiri.<p style="border-top: 1px solid red; border-bottom: 1px solid red;">Contoh paragraf dengan border atas bawah</p>
Contoh kode di atas akan menampilkan elemen paragraf dengan border berwarna merah di bagian atas dan bawah elemen.
Contoh paragraf dengan border atas bawah
Jenis Tampilan Border
solid adalah salahsatu jenis tampilan border, yakni garis lurus biasa. Terdapat beberapa opsi jenis tampilan border lainnya, diantaranya:| Nilai | Deskripsi |
|---|---|
| none/hidden | tanpa border |
| solid | border dengan garis tegas |
| dotted | border dengan titik |
| dashed | border dengan strip |
| double | border dengan garis ganda |
| groove | border 3D seperti lembah/parit |
| ridge | border 3D seperti punggung bukit |
| inset | border 3D seperti cekungan |
| outset | border 3D seperti tonjolan |
PRAKTEK
- Pada editor terdapat contoh paragraf dengan style border yang cukup tebal. Jalankan kode dan lihat hasilnya.
- Dapatkah Kamu tampilkan border hanya bagian garis atas dan bawahnya saja dari paragraf tersebut?
- Coba ganti border stylenya dengan
double,dashed,dotted,groove,ridge,insetdanoutsetdan amati masing-masing perbedaannya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p style="border:10px solid orange;">Selamat belajar style dasar pada HTML</p>
</body>
</html>
Hasilnya:
Selamat belajar style dasar pada HTML
0 Response to "Tutorial Belajar Border di HTML"
Post a Comment