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-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 dengandouble, dashed, dotted, groove,ridge, inset 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

Tutorial Belajar Border di HTML

Sisi Border

Jenis Tampilan Border

PRAKTEK

0 Response to "Tutorial Belajar Border di HTML"

Posting Komentar