Membuat Sudut Border Melengkung pada blog

B

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

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 nanti'a. 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 ;)