CARA MEMBUAT BORDER DI HTML

Memahami dasar-dasar HTML adalah langkah penting dalam perjalanan belajarmu menjadi seorang web developer. Salah satu aspek penting HTML yang sering dijumpai dalam desain web adalah border atau garis tepi. Dalam artikel ini, kita akan membahas cara membuat border di HTML dengan mudah dan cepat.

Memahami Border di HTML

Sebelum kita membahas lebih lanjut tentang bagaimana cara membuat border ini, mari kita pahami dulu apa itu border dalam HTML. Border merupakan bagian dari box model pada HTML dan CSS, yang digunakan untuk membuat tepi pada elemen. Kamu bisa mengatur border tersebut baik dari sisi lebar, gaya, ataupun warnanya.

Bagaimana Cara Membuat Border di HTML

Untuk membuat border di HTML, kamu bisa menggunakan atribut “style” dalam elemen HTML yang kamu inginkan, lalu di dalamnya kamu tambahkan properti CSS untuk border. Berikut adalah langkah-langkah cara membuat border:

Membuat Border Sederhana

Ini adalah contoh cara membuat border sederhana:

<p style="border:1px solid black;">Ini adalah paragraf dengan border</p>

Pada kode di atas, “border” adalah properti CSS, “1px solid black” adalah nilai dari propertinya. Nilai ini terdiri dari tiga bagian, yaitu lebar border (1px), gaya border (solid), dan warna border (black).

Mengubah Lebar Border

Jika kamu ingin mengubah lebar border, cukup ganti angka di bagian px. Misalnya:

<p style="border:3px solid black;">Ini adalah paragraf dengan border lebar</p>

Mengubah Gaya Border

Gaya border mencakup solid, dotted, dashed, dan lainnya. Contohnya:

<p style="border:1px dotted black;">Ini adalah paragraf dengan border bergaya titik-titik</p>

Mengubah Warna Border

Kamu bisa mengganti warna border dengan nama warna atau kode hexadecimal. Sebagai contoh:

<p style="border:1px solid red;">Ini adalah paragraf dengan border merah</p>

Menambahkan Border pada Semua Sisi Elemen

Jika kamu ingin menambahkan border yang berbeda pada setiap sisi elemen, kamu bisa menggunakan properti CSS border-top, border-right, border-bottom, dan border-left.

<p style="border-top:2px solid red; border-bottom:1px dashed black;">Ini adalah paragraf dengan border atas merah dan border bawah hitam bergaya garis putus-putus</p>

Demikianlah cara membuat border di HTML. Mudah bukan? Jangan ragu untuk terus berlatih dan bereksperimen agar kamu semakin mahir dalam membuat desain web dengan HTML. Selamat mencoba!