Cara membuat border radius pada postingan blog

Apa kabarnya sobat..? Pada Postingan Kali ini Saya Akan coba berbagi bagaimana cara membuat Border radius Pada posting Blog Atau Biasa Disebut Garis Melengkung Dan Untuk Mempersingkat Waktu Kita Langsung Saja Pada penjelasan  Berikut ini :

Penerapan Border Radius Pada Suatu Kolom Biasa.

Kode Untuk Kolom Biasa

<div style="border:5px solid #0dc3ff;padding:10px;text-align:center;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Kolom Biasa Diatas

Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Kode Untuk Kolom Biasa

<div style="border:5px solid #0dc3ff;padding:10px;text-align:center;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Silahkan Sobat Lihat Kode Diatas.. itu Adalah Kode Dari Contoh Kolom Biasa Dan Sekarang Kita Akan Menambahkan Beberpa Kode Yang Akan Membuat Kolom Biasa Tersebut Berubah Menjadi Kolom Yang Mempunyai Border Melengkung Pada Sisi Pinggirnya Dan Yang Perlu Ditambahkan Adalah Kode Berikut:

Untuk Firefox: -moz-border-radius:10px;
Untuk Chrome: -Webkit-border-radius:10px;
Untuk IE: border-radius:10px;

Berikut Adalah Kode Lengkapnya Setelah Dimasukkan Pada Kode Kolom Biasa:

<div style="border:5px solid #0dc3ff;padding:10px;text-align:center;-moz-border-radius:10px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Untuk Kode Yang Warna Biru Diatas Adalah Kode Melengkung Support Firefox Yang Saya Sisipkan Pada Kolom Biasa Dan Berikut Hasil Dari Kode Diatas:

Kolom Dengan Border Radius

Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Gimana  Mudahkan?  untuk Lebih Lanjut silahkan Sobat Perhatikan Beberapa Contoh Kolom Melengkung Yang Bisa Sobat Pahami dibawah.

Kode Contoh 1

<div style="border:5px inset #0dc3ff;padding:10px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:20px;-moz-border-radius-bottomright:0px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Contoh 1

Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Kode Contoh 2

<div style="border:5px inset #0dc3ff;padding:10px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomleft:20px;-moz-border-radius-bottomright:20px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Contoh 2

Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Kode Contoh 3

<div style="border:5px inset #0dc3ff;padding:10px;text-align:center;-moz-border-radius-topleft:0px;-moz-border-radius-topright:20px;-moz-border-radius-bottomleft:0px;-moz-border-radius-bottomright:20px;">
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
</div>

Hasil Dari Kode Contoh 3

Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.
Tulisan Atau Gambar Anda disini.

Itulah Beberapa Contoh yang Saya Buat Untuk melanjutkan Pemahaman Sobat Dan Berikutnya Tinggal Sobat Kresikan Sendiri. Biasanya Penggunaan Border Radius ini Sangatlah Cocok Untuk Disain Blog Sobat, Ya Cobalah Otak Atik Sendiri,Semoga dapat membantu.