Tutorial Belajar Border di HTML



Kita dapat menampilkan border dari sebuah elemen dengan menggunakan propertyborder. 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-widthborder-style danborder-colorborder-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:
NilaiDeskripsi
none/hiddentanpa border
solidborder dengan garis tegas
dottedborder dengan titik
dashedborder dengan strip
doubleborder dengan garis ganda
grooveborder 3D seperti lembah/parit
ridgeborder 3D seperti punggung bukit
insetborder 3D seperti cekungan
outsetborder 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 dengandoubledasheddottedgroove,ridgeinset dan outset dan 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

Subscribe to receive free email updates:

0 Response to "Tutorial Belajar Border di HTML"

Posting Komentar