Membuat Border (garis) di HTML & CSS

Masa cuma gitu aja ? Pasti pengen ada motif atau variasi kan di web atau di dokumen HTML CSS kalian ? Nah, misalnya kalian mau kasih variasi border atau garis luar. Gimana caranya ? Property apa yang digunakan di CSS ? Ya Kita pakai border: {kemudian disini nilainya}.

Misalnya saya punya dokumen HTML seperti ini:

<div class="border">
	<p>ini utorial membuat border, mudah dijamin okee cihuuuy...</p>
</div>

Sekarang kita kasih bordernya untuk bagian <div>nya, maka CSS nya seperti ini:

.border {
		border: solid;
	}

Sebetulnya seperti ini saja sudah cukup untuk memunculkan border untuk <div> tadi, hasilnya seperti ini (lihat gambar). Lalu apakah bisa di modifikasi ? Ya, tentu bisa dong. Umumnya orang-orang menggunakan border pasti merubah warna sesuai seleranya. Untuk merubah warna maka kita menambahkan warna di dalam CSS border tadi. Seperti ini contohnya:

.border {
		border: solid #ff0000;
	}

Tadi kita cuma kasih solid aja tapi sekarang udah ada tambahan warna didalam border tersebut maka artinya border solid akan berwarna #ff0000, maka hasilnya border tersebut akan berwarna sesuai warna yang dipilih.

Kalian bisa atur warnanya sesuai keinginan, tinggal diganti aja dibagian warna diatas. Kemudian ada apa lagi ? Kita juga bisa kasih ukuran bordernya, misalnya jadi lebih tebal atau lebih tipis. Caranya kita kasih ukuran px masih didalam CSS border tadi. Jadi seperti ini:

.border {
		border: solid #ff0000 7px;
	}

Saya tuliskan 7px artinya saya mau atur border yang tadi itu ukurannya atau ketebalnnya menjadi 7px dan hasilnya jadi lebih tebal dari sebelumnya silahkan di coba ! Kalo mau lebih tebal tinggal dibesarkan aja px diatas dan kalo mau lebih tipis berarti lebih dikecilkan lagi.

Apa cuma itu aja ? Gak, masih ada lagi nih. Kita juga bisa atur bentuk dari border tersebut. Kalo diatas kan ditulisnya solid artinya normal garis border yang utuh, kita bisa juga gunakan dotted atau dashed yang artinya titik atau strip. Ketika dipasangkan di CSS seperti ini:

.borderDashed {
		border: dashed #ff0000 7px;
	}
	.borderDotted {
		border: dotted #f90 7px;
	}

Saya contohkan sekaligus 2 ya, ada yang dashed dan ada yang dotted dan warnanya saya bedakan biar kelihatan jelas aja, maka hasilnya seperti digambar ini (lihat gambar).

Contoh yang diatas warna orange saya kasih dotted dan yang warna merah saya kasih dashed, kelihatan kan bedanya ? Nah, sekarang kalian berhasil buat border. Tinggal di share aja ke temen-temen biar sama-sama tau ya.

Masih bingung ? Lihat : Video Tutorial Cara Membuat Border.

Explore aja terus border ini biar gak lupa cara pakainya, mungkin kalian yang menggunakan Adobe Dreamweaver lebih banyak pilihan yang muncul pas lagi nulis isi border. Jadi lebih gampang gak perlu dihafal karena di Adobe Dreamweaver semua pilihan suka dimunculkan, kita tinggal pilih aja karena masih ada lagi selain dotted, dashed dan solid.

Selamat mencoba !