Membuat Sudut Border Melengkung pada blog

Bagi Sobat yang sering jalan-jalan di dunia maya, pasti sering menemui blog yang pada sudut-sudut bordernya di buat melengkung seperti pada blog milik Qu ini :$ . Hal tersebut tentunya membuat blog tersebut terlihat Cantik dan Menawan :P . Sobat tentunya ingin mengetahui bagaimana cara membuat blog agar terlihat seperti itu. Maka mari kita langsung memulainya ;) .

Sebelum memulai Sobat harus membuat

border

biasa terlebih dahulu, seperti ini

<div style='padding:10px;border:4px solid #fff;margin:auto;'>

Agar sudut-sudut dari border tersebut melengkung, Sobat harus menambahkan border-radius, -moz-border-radius, dan -webkit-border-radius, sehingga menjadi seperti ini

<div style='padding:10px;border:4px solid #fff;margin:auto;-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;'>

Ukuran Pixels(px) dapat Sobat tentukan sendiri menurut keinginan Sobat :$ .

Sobat juga dapat membuat bervariasi bentuk border Sobat sendiri, Qu akan memberikan beberapa contoh sebagai acuan Sobat nantinya. Coba Sobat lihat Variasi Border di bawah ini

<div style='padding:10px;border:4px solid #fff;margin:auto;-moz-border-radius-topleft: 50px; -webkit-border-top-left-radius: 50px; -moz-border-radius-bottomright: 50px; -webkit-border-bottom-right-radius: 50px; border-radius: 50px;'>

<div style='padding:10px;border:4px solid #fff;margin:auto;-moz-border-radius: (TopLeft) (TopRight) (BottomRight) (BottomLeft); -webkit-border-radius: (TopLeft) (TopRight) (BottomRight) (BottomLeft); border-radius: (TopLeft) (TopRight) (BottomRight) (BottomLeft);'>

Slamat mencoba ;)