Home » » Membuat Border dengan Kode HTML

Membuat Border dengan Kode HTML

Diposting Oleh Bang Dayat ; Hari Senin, 03 September 2012 Jam 06.17

Border merupakan sebuah garis yang membatasi dari sebuah kata atau kalimat atau paragraf. Selain itu penggunaan border juga bisa untuk hal yang lainnya. Misalnya kita ingin membuat border pada postingan kita.

Tujuan pembuatan border adalah untuk menandai suatu yang penting atau pemisahan. Dengan border suatu postingan akan terlihat anggun. Jenis border pun bermacam-macam.

Bagi yang ingin menggunakan border berikut jenis-jenis border beserta kode html-nya :

1.  Solid

<div style="background-color: #eaeaea; border: 4px #3366FF solid; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

2. Dotted

<div style="background-color: #eaeaea; border: 4px #3366FF dotted; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

3. Dashed

<div style="background-color: #eaeaea; border: 4px #3366FF dashed; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

4. Ridge

<div style="background-color: #eaeaea; border: 4px #3366FF ridge; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

5. Groove

<div style="background-color: #eaeaea; border: 4px #3366FF groove; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

6.Inset

<div style="background-color: #eaeaea; border: 4px #3366FF inset; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

7. Outset

<div style="background-color: #eaeaea; border: 4px #3366FF outset; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

8. Double

<div style="background-color: #eaeaea; border: 4px #3366FF double; padding: 10px; text-align: left;">
MASUKAN TEKS DISINI</div>

9. Border yang menggunakan scroll

<div style="background-color: #eaeaea; border: 4px #3366FF solid; height: 60px; overflow: auto; padding: 10px; text-align: left; width: 260px;">
TULIS MASUKAN TEKS DISINI</div>

Keterangan :

- Bisa mengubah background-color dengan mengganti kode #eaeaea
- Bisa mengubah ketebalan border dengan mengganti nilai  border: 4px
- Bisa mengubah jarak antara teks dan border dengan mengganti nilai padding: 10px
- Untuk mengubah ukuran sesuai keinginan maka gunakan kode height: 60px (tinggi) dan width: 260px   (lebar)

Kira-kira segitu dulu penjelasan sedikit tentang border dan semoga bermanfaat. Jika ada kesalahan dalam penjelasannya mohon komentarnya agar bisa segera kami perbaiki.
Berbagi dengan artikel ini :
Ditulis oleh : Bang Dayat
Description: Membuat Border dengan Kode HTML , Rating: 5
Reviewer: Bang Dayat, ItemReviewed: Membuat Border dengan Kode HTML

Artikel terkait tentang

Berlangganan Artikel BD
Masukkan Email Anda:

 
Support : Bang Dayat
Copyright © 2012-2017. Bang Dayat Blog's - All Rights Reserved

Proudly powered by Blogger