Jenis-jenis Border CSS Pada Blog

"Jenis-jenis Border CSS Pada Blog"

   Hallo Sobat...?? Kali ini saya akan mempostingkan artikel tentang "Jenis-jenis Border CSS Pada Blog", Border atau garis pinggir pada CSS pastinya sering anda temukan pada tutorial seperti membuat horizontal menu maupun vertical menu, tertulis dengan contoh kode seperti berikut :

border : 2px solid #000000;

Keterangan :

px menunjukan ketebalan dari garis tersebut, semakin besar angkannya, semakin tebal garis border tersebut.
solid menunjukan jenis garis border.
#000000 merupakan kode warna untuk memberi warna garis border.

   Namun tahukah anda, selain solid ada berbagai macam jenis border pada CSS, dan akan saya ulas dalam posting kali ini.

Berikut Jenis-jenis Border CSS Pada Blog :

 Border Solid.

<div style="border: 7px solid #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border solid

Border Dotted

<div style="border: 7px dotted #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border dotted

Border Dashed

<div style="border: 7px dashed #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border dashed

Border Double

<div style="border: 7px double #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border double

Border Groove

<div style="border: 7px groove #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border groove

Border Ridge

<div style="border: 7px ridge #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border ridge

Border Inset

<div style="border: 7px inset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border inset

Border Outset

<div style="border: 7px outset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Ini adalah contoh border outset

Sobat ingin Copas semua kode diatas..??

Copas semua kode DISINI

Catatan :

   Dimulai dari border double ke bawah pada contoh di atas, ukuran atau tebal border harus di atas 2px agar lebih terlihat perbedaannya.

   Perintah border dalam kode css akan membentuk garis kotak yang didalamnya terdapat objek teks atau bagian template, dengan angka ketebalan border 2px akan menghasilkan ketebalan yang sama pada setiap sisi garisnya.

   Untuk memberikan ketebalan yang berbeda pada setiap sisi garisnya, kita harus memberi keterangan perintah berbeda pada setiap sisi garis tersebut, seperti border-top untuk garis bagian atas, border-bottom untuk garis bagian bawah, border-left untuk garis bagian kiri dan border-right untuk garis bagian kanan, sebagai ilustrasi dalam penulisan script-nya sebagai berikut :

border-top:2px solid #dddddd;
border-bottom:9px dotted #ffffff;
border-left:1px dashed #000000;
border-right:5px double #cccccc;

   Setelah mengetahui jenis-jenis garis border, kalian bisa lebih menonjolkan garis-garis border tersebut untuk design tampilan blog dan menggabungkan efek transparan pada design tampilannya.

   Nah, sekian dulu artikel dari saya tentang "Jenis-jenis Border CSS Pada Blog" semoga artikel ini bisa membantu dan bermanfaat untuk kita semua...

"Terima Kasih"