Membuat Border dengan Kode HTML

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.