Membuat Border / Widget Melengkung pada Blog

Pasti sobat sudah pernah melihat sudut pada blog, baik di widget maupun terdapat pada border artikel.. Nah kali saya akan membuat turtorial cara membuat sudut border atau widget melengkung. Jika sobat tertarik untuk membuatnya, simaklah turtorial di bawah ini.

Contoh border pada artikel / border baru mau di buat :

<div style="background-color: #eaeaea; border: 6px #000000 inset; height: 100px; padding: 10px; text-align: left; width: 150px;">Dewi Purnama</div>

dan hasil dari code itu adalah :

Dewi Purnama

Jika kita tambahkan Code seperti di bawah ini :
border-radius: 15px;

Maka hasilnya akan seperti ini :
<div style="background-color: #eaeaea; border-radius: 15px; border: 6px #000000 inset; height: 50px; padding: 10px; text-align: left; width: 150px;">Dewi Purnama</div>

dan bentuknya akan seperti ini :

Dewi Purnama

Selain itu sobat bisa membuat sudut melengkung pada sudut tertentu. berdasarkan hasil di atas maka sudut - sudut melengkung lainnya akan seperti di bawah ini :

border-radius: 15px 0px;

border-radius: 15px 0px;

border-radius: 0px 15px;

border-radius: 0 15px 15px;

border-radius: 15px 0 15px;

border-radius: 0px 0 15px;

border-radius: 15px 0 0 15px;

border-radius: 0 15px 15px 0;

Selamat mencoba di blog anda, semoga bermanfaat.

Post by Doel Piero.