Cara Membuat Garis Lengkung Pada Semua Postingan di Blog

Border adalah salah satu property css, border memiliki fungsi untuk memberi batas/garis(seperti) pada suatu bidang/box/tag html. Nah pada border ini kita akan mempelajari cara membuat garis lengkung pada border. Garis ini sangat bagus yang menjadikan blog kita tampak lebih indah dan berkesan.

Garis lengkung ini otomatis sudah bekerja dimana saja, di sidebar, footer, header, dan juga bagian posting. Contohnya bisa sobat lihat pada gambar di bawah ini:

Berikut bagian-bagiannya kode CSSnya:

• -moz-border-radius => ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
• -moz-border-radius-bottomright => ini membuat garis melengkung kanan bawah
• -moz-border-radius-bottomleft => ini di gunakan untuk membuat garis kiri bawah melengkung
• -moz-border-radius-topright => ini untuk garis melengkung kanan atas
• -moz-border-radius-topleft => ini untuk garis melengkung bagian kiriatas

1. Login ke blogger dengan account anda.Lalu ke TATA LETAK –> EDIT HTML.

2. Cari kode h2.date-header { , Lalu letakkan kode di bawah ini setelah kode tersebut.

border-left:3px solid #c0c0c0;
border-right:3px solid #c0c0c0;
border-top:3px solid #c0c0c0;
border-bottom:0px solid #c0c0c0;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;

3. Cari kode .post-body { , Lalu letakkan kode di bawah ini setelah kode tersebut.

border-right:3px solid #c0c0c0;
border-left:3px solid #c0c0c0;

4. Setelah itu,, sekarang cari kode .post-footer { , Lalu tambahkan kode di bawah ini setelah kode tersebut.

  border-left:3px solid #c0c0c0;
  border-right:3px solid #c0c0c0;
  border-top:0px solid #c0c0c0;
  border-bottom:3px solid #c0c0c0;
  -moz-border-radius-bottomleft:15px;
  -moz-border-radius-bottomright:15px;

5. Kemudian simpan.

Bagaimana, mudah kan ??