Cara Membuat Border Di dalam Postingan

Apa yang dimaksud dengan Border?
Sama seperti istilah didunia nyata, didunia website/blog Border adalah garis tepi dari suatu objek (dalam artikel ini berarti teks) yang membatasi objek tersebut dengan objek lain disekelilingnya. Biasanya dibuat untuk mengelompokkan beberapa tulisan yang memiliki kesamaan maksud. Hampir sama fungsinya dengan Blockquote yang telah kita ulas beberapa hari yang lalu. Sebelum melangkah jauh, perlu kita kenali terlebih dulu beberapa jenis border yang mungkin akan sering kita temui.

Solid - Dashed - Dotted - Double - Groove - Outset - Ridge

Bagaimana cara membuat Border?
Jika di website/blog untuk menampilkan Border cara membuatnya diperlukan penulisan kode HTML serta beberapa atribut CSS untuk mengatur penampakan border tersebut. Dibawah ini adalah beberapa atribut penting yang perlu kita pahami :

• <div style> ... </div> : tag pembuka dan penutup untuk menampilkan border
• background-color : mengatur warna background didalam border
• border : mengatur ketebalan garis, jenis border, dan warna border
• padding : mengatur jarak ruang antara teks didalam dengan border
• width : mengatur lebar daripada area border

Setelah memahami fungsi masing-masing atribut diatas, sekarang langsung ke prakteknya saja.
Karena judul tulisan ini adalah "Membuat Border Didalam Posting", untuk itu sebelum memulai praktek silahkan buat posting baru dulu. Untuk penulisan kode-nya gunakan opsi HTML didalam menu posting, bukan Compose.

1. Solid
Kode :

<div style="background-color: yellow; border: 1px solid #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Solid ketebalan garis 1px dan warna background kuning</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Solid ketebalan garis 1px dan warna background kuning

2. Dashed
Kode:

<div style="background-color: #F5D0A9; border: 2px dashed #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Dashed ketebalan garis 2px dan warna background kuning</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Dashed ketebalan garis 2px dan warna background #F5D0A9

3. Dotted
Kode :

<div style="background-color: #81f7f3; border: 3px dotted #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Dotted ketebalan garis 3px dan warna background #81F7F3</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Dotted ketebalan garis 3px dan warna background #81F7F3

4. Double
Kode :

<div style="background-color: #F781F3; border: 4px double #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Double ketebalan garis 4px dan warna background #F781F3</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Double ketebalan garis 4px dan warna background #F781F3

5. Groove
Kode :

<div style="background-color: #D0A9F5; border: 5px groove #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Groove ketebalan garis 5px dan warna background #D0A9F5</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Groove ketebalan garis 5px dan warna background #D0A9F5

6. Outset
Kode :

<div style="background-color: #ACFA58; border: 6px outset #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Outset ketebalan garis 6px dan warna background #ACFA58</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Outset ketebalan garis 6px dan warna background #ACFA58

7. Ridge
Kode :

<div style="background-color: #00CCFF; border: 7px ridge #000000; padding: 5px; width: 500px;">
Ini adalah contoh tulisan dengan border Ridge ketebalan garis 7px dan warna background #00CCFF</div>

Hasilnya :

Ini adalah contoh tulisan dengan border Ridge ketebalan garis 7px dan warna background #00CCFF