Kode CSS Jenis- Jenis Border dalam Blog/ Website

Rabu, 13 Juni 2012

Dalam blogging, penggunaan border adalah salah satu hal yang lumrah dan sering kita jumpai. Border yang kita kenal dalam blogging terdiri dari beberapa jenis dan dapat kita otak- atik sesuai keinginan dengan memahami kode CSS border. Selain bisa diterapkan dalam template, border juga dapat kita manfaatkan untuk mempercantik postingan kita agar terlihat lebih rapi dan enak dilihat.

Berikut ini adalah jenis- jenis border dalam blog dan juga kode CSS nya ( perhatikan kode berwarna merah ) :

1. Border Standar/ Solid

Kode CSS :

<div style="background: none; border: 1px solid rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Solid </div>

Preview :

Contoh Border Solid

2. Border Dotted

Kode CSS :

<div style="background: none; border: 1px dotted rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Dotted </div>

Preview :

Contoh Border Dotted

3. Border Dashed

Kode CSS :

<div style="background: none; border: 1px dashed rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Dashed </div>

Preview :

Contoh Border Dashed

4. Border Groove

Kode CSS :

<div style="background: none; border: 2px Groove rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Groove </div>

Preview :

Contoh Border Groove

5. Border Double

Kode CSS :

<div style="background: none; border: 2px double rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Double </div>

Preview :

Contoh Border Double

6. Border Ridge

Kode CSS :

<div style="background: none; border: 2px ridge rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Ridge </div>

Preview :

Contoh Border Ridge

7. Border Inset

Kode CSS :

<div style="background: none; border: 2px inset rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Inset </div>

Preview a:

Contoh Border Inset

8. Border Outset

Kode CSS :

<div style="background: none; border: 2px outset rgb(153, 153, 153); height: 30px; text-align: center; width: 300px;"> Contoh Border Outset </div>

Preview :

Contoh Border Outset

Wah ternyata cukup banyak ya sobat jenis- jenis border dalam blog? Lumayan juga kan buat sekedar nambah referensi kita yang mungkin selama ini hanya membuat border dengan bentuk solid atau dotted. Sebagai catatan tambahan, untuk membuat border selain model solid, dotted dan dashed, sebaiknya ukuran pixel nya lebih dari 2px agar hasilnya bagus dan lebih terlihat jelas. Selain itu untuk kode warna maupun teks bisa sobat variasikan sesuai dengan kebutuhan.

Sekian dulu postingan Kode CSS Jenis- Jenis Border dalam Blog. Semoga bermanfaat.