Kode CSS Jenis- Jenis Border dalam Blog/ Website

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 solidrgb(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 dottedrgb(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 dashedrgb(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 Groovergb(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 doublergb(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 ridgergb(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 insetrgb(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 outsetrgb(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.