Cara Membuat Border Melengkung Pada Blogger - IdBlogDesign

Dalam artikel sebelumnya kita sudah membahas sedikit tentang kode css border style. Dalam kesempatan kali ini, IdBlogDesign ingin berbagi tips tentang cara membuat border melengkung pada blogger. Tetapi sebelum kita lanjutkan, perlu untuk Anda ketahui bahwa cara ini belum tentu dapat bekerja dengan baik pada jenis browser versi lama. Jadi alangkah baiknya jika Anda menggunakan versi browser yang baru.

Selain browser-browser versi terbaru mendukung banyak bahasa css yang asyik layaknya penggunaan text shadow, border shadow, border yang dapat melengkung dan yang lainnya, browser-browser versi terbaru tentunya juga lebih aman jika digunakan. Ok, kembali ke topik utama yaitu tentang membuat border yang melengkung pada posting artikel atau template blogger Anda.



Langkah pertama yaitu kita bisa membuat id atau class pada kode css template blogger kita, misalnya kita membuat id "melengkung" jadi kita akan membuat kode seperti ini:

#melengkung {
}

Dan setelah itu tambahkan kode css berikut ini kedalamnya :

-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-o-border-bottom-left-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;

atau juga bisa dengan kode :

-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;

dan ada baiknya jika ditambahkan kode padding dan margin agar terlihat rapi, sehingga hasil akhirnya akan terlihat seperti ini:

#melengkung {
-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
-o-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
padding:5px;
margin:0;
}

Dan setelah itu jangan lupa simpan template blogger Anda.

Dengan adanya kode css yang telah kita buat tadi maka kita bisa menampilkan border yang melengkung pada posting artikel blogger maupun pada template blog kita dengan cara seperti ini:

<div id="melengkung">Konten Anda</div>

atau

<span id="melengkung">Konten Anda</span>

atau

<p id="melengkung">Konten Anda</p>

Selamat mencoba dan Selamat berkreasi dengan blogger Anda...